函数运行时暂停事件答案

【问题标题】：pause event while function runs函数运行时暂停事件
【发布时间】：2013-07-24 22:39:55
【问题描述】：

我正在编写一个无限滚动函数，如果$(window).scrollTop() 几乎与文档高度一样大，它就会运行，并且它运行良好......

问题是加载新帖子需要几秒钟的时间，并且在此期间，如果页面滚动，则在文档变大之前会多次调用该函数，因此不会以这种方式加载帖子我故意的。

我可以在函数中添加一行来暂停特定事件（在本例中为 scroll 事件），直到函数完成执行？

function f(){
    //stop $(window).scroll
    //execute code
    //allow $(window).scroll
}
$(window).scroll(function(){
    if(condition){
        f();
    }
});

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

John Resig 前一阵子发过帖子

这是他使用的代码

didScroll = false;

$(window).scroll(function() {
     didScroll = true;
 });

setInterval(function() {
    if ( didScroll ) {
      didScroll = false;
      // Check your page position and then
      // Load in more results
   }
}, 250);

【讨论】：

这几乎可以工作，但它仍然给我带来了一些麻烦......但现在很好......也许我应该从 .load 切换到 .ajax
Post 可以帮助您选择使用哪个
我最终使用了这个负载！只要延迟在 500-1000 之间，它就可以完美运行。我刚刚添加了一条加载消息，并让它更早地开始触发

【解决方案2】：

您可以使用$.off 取消绑定事件，但我建议只使用变量来跟踪它是否被触发。

这个 sn-p 将阻止 f 被调用，直到 scrolling 再次设置为 false。

$(window).scroll(function(){
    if(this.scrolling == undefined)
        this.scrolling = false;

    if(this.scrolling == false){
        this.scrolling = true;
        f();
    }
});

function f(){
    //execute code
    window.scrolling = false;
}

【讨论】：

@RyanSaxe 确保 window.scrolling = false;是在 ajax 回调中，而不是在调用 ajax 请求的函数中。在下载和插入新帖子之前，代码将继续执行并启用滚动事件。

【解决方案3】：

您可以在调用滚动事件后删除它，然后在加载帖子请求完成时重新附加它：

function loadPosts() {
    if (condition) { // e.g. scrollTop almost equal to document height.
        $(window).off('scroll', loadPosts);
        $('[selector]').load('[URL-to-posts]', function(posts) {
            bindScroll();
            // Display posts.
        });
    }
}

// Binds the scroll event.
function bindScroll() {
    $(window).on('scroll', loadPosts);
}

$(bindScroll); // Call on document ready.

【讨论】：

我使用的是 `.load'，而不是 '.ajax'...除了 ajax 过载的更多功能之外，还有其他重要原因吗？
@RyanSaxe load 很好； ajax 是一个较低级别的函数，可以为您提供更多控制权，但如果您不需要它，则没有理由直接使用它。（load 调用 ajax 幕后。）重要的是，在回调中重新绑定滚动事件意味着它不会在请求完成之前发生。