jQuery的滚动调用一个函数多次(jQuery scroll calls a function m

我有如下一个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示例这里

Answer 1:

这是一个功能而不是一个错误，是正常的，每个滚动事件发生时，滚动事件发布的每一个元素的滚动条中的位置发生变化时及时收到它。

您可以添加一个标志，一个类或超时，避免它，如果不想要它。

例如一个超时可能会做这样的：

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:

定时器是坏的，它创造了大量的编程开销...添加类使代码慢也是如此。 要绑定的功能，并做了每次用户滚动参数的检查。 这是资源的巨大浪费！

如果你想一次调用一个函数在用户滚动在第一次调用解除绑定功能：

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

文章来源: jQuery scroll calls a function multiple times