SetInterval внутри событий прокрутки на iPhone - почему этот код не работает? - PullRequest
Новая
       2

SetInterval внутри событий прокрутки на iPhone - почему этот код не работает?

1 голос
/ 31 июля 2011

Пожалуйста, посмотрите на этот код (я использую Zepto http://zeptojs.com/ BTW) ... 

var timer = false;

$(window).bind('touchstart touchmove scroll', function (e) {
    if (timer === false) {
        timer = setInterval(function () {
            $('footer').css('top', (this.pageYOffset + this.innerHeight - 40) + 'px');
            console.log('Adjusted...');
        }, 100);
    }
}).bind('touchend', function () {
    clearInterval(timer);
    timer = false;
    console.log('Cleaned it up...');
});

Как видите, у меня есть элемент нижнего колонтитула, который я пытаюсь зафиксировать в нижней части экрана iPhone. Я знаю, что есть библиотеки, которые помогают нам сделать это довольно легко, например iScroll 4 http://cubiq.org/iscroll-4,, но я пытался понять, смогу ли я сделать это проще.

Оказывается, что приведенный выше код не работает должным образом. Хотя я на самом деле прокручиваю страницу, по какой-то причине setInterval не выполняется, а вместо этого, кажется, накапливается в фоновом режиме, чтобы выполнить каждый вызов одновременно.

В конце он не делает то, что я хотел, а именно «анимирует» нижний колонтитул и делает его на месте во время прокрутки, а не только после. Кто-нибудь имеет представление о том, как такой эффект может быть достигнут подобным образом?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 31 июля 2011

В вашем внешнем обратном вызове this будет элементом DOM, который вас интересует, но внутри обратного вызова setInterval, this будет window. Помните, что this - это ключевое слово, а не переменная, и что оно очень контекстно-зависимо.

Обычный подход заключается в захвате значения this в переменной и последующем использовании этой переменной вместо this: 

if(timer === false) {
    var self = this; // "_that" is also a common name for the variable.
    timer = setInterval(function () {
        $('footer').css('top', (self.pageYOffset + self.innerHeight - 40) + 'px');
        console.log('Adjusted...');
    }, 100);
}

Подобные проблемы относятся ко всем обратным вызовам в JavaScript, всегда убедитесь, что вы знаете, что такое this, захватите его значение и создайте замыкание над этим значением, когда оно не будет тем, что вы хотите.

0 голосов
/ 31 июля 2011

Когда вы передаете метод setInterval () (или любой другой функции), он будет вызван с неверным значением this. Эта проблема подробно объясняется в справочнике по JavaScript.

Документы MDC

...