防止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請求（作爲第二個參數傳遞​​功能），真正的而不是調用​​之後。