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

Question

请看一下这段代码（顺便说一句，我正在使用 Zepto http://zeptojs.com/）。 正如您所看到的，

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 是什么，获取它的值，并在它不是您想要的值时构建一个闭包。