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（）（或任何其他函数）时，将使用错误的此值调用它。 JavaScript引用中详细解释了此问题。

MDC docs

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是什么，并抓住它的值，并在它不符合你想要的值时构建一个关闭。

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

2 个答案: