防止jQuery .scroll函数在执行.scroll函数时运行

Question

我想阻止jQuery .scroll函数在执行.scroll函数内部运行时运行。 原因是因为它可能会运行两次并对我造成问题。

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 


// do stuff 

} 

我想：

var carRun = true; 
    if (canRun==true){ 
      $(window).scroll(function() { 
      if($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 
      canRun=false; 

      // do stuff 

      canRun=true; 
    } 
} 

，并没有解决问题。

编辑：

这些事情我试过，而不是为我工作测试： 一：

 var canRun = true; 
$(window).scroll(function() { 
    if (canRun == true){ 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 
      canRun = false; 

      // Are there more posts to load? 
      if (pageNum <= max) { 
       console.log(max); 
       // Show that we're working. 
       $('#loadmoreLink').text('Loading posts...'); 

       $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post', 
        function() { 
         // Update page number and nextLink. 
         console.log("The number of the next page to load: " + pageNum); 
         pageNum++; 
         console.log("The number of the next page to load after increment: " + pageNum); 
         nextLink = 'http://www.example.com.br/page/' + pageNum + '/'; 
         console.log("The link of the next page: " + nextLink); 

         // Add a new placeholder, for when user clicks again. 
         $('#pbd-alp-load-posts') 
          .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>'); 
         console.log("--------END AJAX-------------"); 
         // Update the button message. 
         if(pageNum <= max) { 
          $('#pbd-alp-load-posts a').text('Load More Posts'); 
         } else { 
          $('#pbd-alp-load-posts a').text('No more posts to load.'); 
         } 
        } 
       ); 
      } 
     canRun = true; 
     } 
    } 
    }); 

二：

 var canRun = true; 
$(window).scroll(function() { 
    if(($(window).scrollTop() + $(window).height() > $(document).height() - 50) && (canRun == true)) { 
      canRun = false; 

      // Are there more posts to load? 
      if (pageNum <= max) { 
       console.log(max); 
       // Show that we're working. 
       $('#loadmoreLink').text('Loading posts...'); 

       $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post', 
        function() { 
         // Update page number and nextLink. 
         console.log("The number of the next page to load: " + pageNum); 
         pageNum++; 
         console.log("The number of the next page to load after increment: " + pageNum); 
         nextLink = 'http://www.example.com.br/page/' + pageNum + '/'; 
         console.log("The link of the next page: " + nextLink); 

         // Add a new placeholder, for when user clicks again. 
         $('#pbd-alp-load-posts') 
          .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>'); 
         console.log("--------END AJAX-------------"); 
         // Update the button message. 
         if(pageNum <= max) { 
          $('#pbd-alp-load-posts a').text('Load More Posts'); 
         } else { 
          $('#pbd-alp-load-posts a').text('No more posts to load.'); 
         } 
        } 
       ); 
      } 
     canRun = true; 
     } 
    }); 

这一个曾工作：

jQuery(document).ready(function($) { 

    // The number of the next page to load (/page/x/). 
    var pageNum = parseInt(pbd_alp.startPage); 
    // The maximum number of pages the current query can return. 
    var max = parseInt(pbd_alp.maxPages); 
    // The link of the next page of posts. 
    var nextLink = pbd_alp.nextLink; 
    //what page am I on? 
    var whatPage = pbd_alp.theTitle; 
    //console.log(whatPage); 

    /** 
    * Replace the traditional navigation with our own, 
    * but only if there is at least one page of new posts to load. 
    */ 
    if(pageNum <= max) { 
     // Insert the "More Posts" link. 
     $('#content').append('<div class="pbd-alp-placeholder-'+ pageNum +'" ></div>') 
     .append('<p id="pbd-alp-load-posts"><a href="javaScript:void(0);" id="loadmoreLink" onclick="_gaq.push([\'_trackEvent\', \'Click\', \'LoadMore\', \''+ whatPage +'\']);">Load More Posts</a></p>'); 

     // Remove the traditional navigation. 
     $('.navigation').remove(); 
    } 


    /** 
    * Load new posts when the link is clicked. 
    */ 

    var timerId = false; 
    var canRun = true; 

    $(window).bind('scroll', function() { 

     if(canRun == true){ 
      if($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 
        canRun = false; 

        // Are there more posts to load? 
        if (pageNum <= max) { 
         console.log(max); 
         // Show that we're working. 
         $('#loadmoreLink').text('Loading posts...'); 

         console.log("start loading things from "); 
         $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post', function() { 
           console.log("Im in da callback, loading has finished"); 
           // Update page number and nextLink. 

          //the target of load is '.pbd-alp-placeholder-'+ pageNum 
          //pageNum must'nt be changed before loading. 
           console.log("The number of the next page to load: " + pageNum); 
           pageNum++; 
           console.log("The number of the next page to load after increment: " + pageNum); 
           nextLink = 'http://www.example.com.br/page/' + pageNum + '/'; 
           console.log("The link of the next page: " + nextLink); 


           // Add a new placeholder, for when user clicks again. 
           $('#pbd-alp-load-posts').before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>'); 

           // Update the button message. 
           if(pageNum <= max) { 
            $('#pbd-alp-load-posts a').text('Load More Posts'); 
           } else { 
            $('#pbd-alp-load-posts a').text('No more posts to load.'); 
           } 

           //and now that I have finished, we can load more stuff 
           canRun = true; 
         }); 
        } 
      } 
     } 
    }); 
}); 

Answer 1

如果语句进入函数。另外，您需要将变量定义为canRun而不是carRun。否则，您将不会设置具有全局范围的变量。

var canRun = true; 

$(window).scroll(function() { 
    if (canRun==true){ 
     if($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 
      canRun=false; 

      // do stuff 

      canRun=true; 
     } 
    } 
} 

此外，这里考虑最多的回答作为一种替代方案：jQuery - how to treat scroll as single event?只会让每200ms一个函数调用。

Answer 2

您可以设置一个窗口属性，如window.scroll_working，它将在您的if循环中设置为true，之前设置为功能。逻辑：

$(window).scroll(callback) 

function callback() { 
    if(window.working) return; 

    if($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 

    window.working = true; 
    // do your stuff 
    } 
    window.working = false 
} 

working demo

Answer 3

这会做你想要什么：http://jsfiddle.net/CQffC/2/

它只允许每5秒滚动码的一个运行，但是当它允许它立即执行。当然，您可以根据自己的喜好进行修改。

$(document).ready(function() { 
    var timerId = false; 

    $(window).bind('scroll', function() { 
     if (timerId==false) { 
      console.log('here'); 

      /* Do Stuff Here */ 

      timerId = setTimeout(function(){ 
        timerId = false; 
      }, 5000) 
     } 
    }); 
}); 

Answer 4

正如我在评论中猜测，这个问题（除了if语句在错误的位置最初是）是你开始一个异步过程（在这种情况下使用jQuery的​​功能的AJAX请求）在您的scroll事件处理程序中。这意味着，当前的执行顺序是这样的：

1. 设置canRun假
2. 启动AJAX请求
3. 设置canRun为true
4. 接收到AJAX请求的响应，并用它做什么

你当然希望你的执行顺序是：

1. 设置canRun假
2. 启动AJAX请求
3. 接收到AJAX请求的响应，并用它做什么
4. 设置canRun为true

你怎么做呢？

集canRun在当前的回调对于AJAX请求（作为第二个参数传递​​功能），真正的而不是调用​​之后。