iPhone上滚动事件中的SetInterval-为什么此代码不起作用？

Question

请看一下这段代码（我正在使用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不会执行，而是堆积在后台以同时运行每个调用。

最后，它并没有执行我想要的操作，而是要使页脚“动画化”，并且不仅在滚动后还要在滚动时将其放置到位。 有谁知道如何以类似的方式实现这种效果？

谢谢！

Answer 1

当您将方法传递给setInterval（）（或其他任何函数）时，将使用错误的this值调用该方法。 此问题在JavaScript参考中进行了详细说明。

MDC文档

Answer 2

在外部回调内部， 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是什么，并掌握其值，并在不需要该值时建立该值的闭包。