Question

我有一个jquery滚动功能，如下所示：

$(window).scroll(function() {
if (($(window).scrollTop() + $(window).height()) >= ($('body').height() * 0.7)) {
        alert('call me');
     }
});

HTML：

<div style="height:450px;">BOX</div>

当我滚动时，而不只是一个call me我多次call me。为什么这样，什么是错的？ JSFiddle Example Here

Answer 1

这是一个不是bug的功能，每次滚动事件发生时接收它都是正常的，每次滚动条中元素的位置改变时都会启动滚动事件。

如果不需要，可以添加标志，类或超时以避免它。

例如，如果超时，您可以这样做：

JS：

var timeout;

$(window).scroll(function() {
    if(typeof timeout == "number") {
      window.clearTimeout(timeout);
      delete timeout;
   }
   timeout = window.setTimeout( check, 100);
});

function check(){
if (($(window).scrollTop() + $(window).height()) >= ($('body').height() * 0.7)) {
        alert('Call me!')
     }
}

小提琴在这里： http://jsfiddle.net/f3C6Y/2/

Answer 2

可能有其他方法可以做到这一点，但你可以设置一个CSS类，然后在你再次调用它之前检查该类是否存在......这样的事情：

function callfunction() 
{
    if (($(window).scrollTop() + $(window).height()) >= ($('body').height() * 0.7)) {
    $('body').addClass('called');
    alert('call me');
    }
}

$(document).scroll(function () { 
    if(!$('body').hasClass('called')) 
    {
        callfunction();
    }
}

Answer 3

计时器很糟糕，它会产生大量的编程开销......添加类也会使代码变慢。每次用户滚动时，您都绑定一个函数并检查参数。这是对资源的巨大浪费！

如果你想在用户上调用ONCE函数，请在第一次调用时取消绑定该函数：

function callfunction(){
   $(window).unbind("scroll");
   //*... do the rest of your programming here
}

Answer 4

在Stackoverflow here上有一个很好的解决方案

var timer;

$(window).scroll(function(){

    if ( timer ) clearTimeout(timer);

    timer = setTimeout(function(){
        // Make your AJAX request here...
    }, 10000);
});

jQuery滚动多次调用一个函数

4 个答案:

JS：