Empêche la fonction .scroll de jQuery de s'exécuter en même temps que la fonction .scroll

Question

Je veux empêcher la fonction jQuery .scroll de s'exécuter en même temps que la fonction .scroll. La raison est parce qu'il peut courir deux fois et causer des problèmes pour moi.

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


// do stuff 

} 

J'ai essayé:

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

      // do stuff 

      canRun=true; 
    } 
} 

et il n'a pas résolu le problème.

Edit:

ce sont des tests de choses que j'essayé et ne fonctionnent pas pour moi: n ° 1:

 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; 
     } 
    } 
    }); 

n ° 2:

 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; 
     } 
    }); 

Celui-ci travaillé:

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

Si la déclaration va à l'intérieur de la fonction. En outre, vous devez définir la variable comme canRun et non carRun. Sinon, vous ne définissez pas de variable avec une portée globale.

var canRun = true; 

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

      // do stuff 

      canRun=true; 
     } 
    } 
} 

Aussi, tenez compte de la réponse haut ici comme une alternative: jQuery - how to treat scroll as single event? Il ne permettra une fonction d'appel tous les 200ms.

Answer 2

Vous pouvez définir une propriété de fenêtre comme window.scroll_working qui sera définie sur true dans votre boucle if et avant si fonctionnalité. Logique:

$(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

Cela va faire ce que vous voulez: http://jsfiddle.net/CQffC/2/

Il permet un seul passage du code de défilement toutes les 5 secondes, mais il exécute immédiatement quand il est permis. Vous pouvez, bien sûr, modifier cela à votre goût.

$(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

Comme je l'ai spéculé dans les commentaires, la question (en dehors de la déclaration if étant initialement au mauvais endroit) est que vous commencez un processus asynchrone (dans ce cas, une requête AJAX en utilisant la fonction .load() jQuery) à l'intérieur de votre gestionnaire d'événements scroll.Cela signifie que votre ordre d'exécution actuel est essentiellement ceci:

1. Set canRun false
2. Lancer la requête AJAX
3. Set canRun true
4. Recevoir une réponse à la demande AJAX et faire quelque chose avec elle

Vous voulez évidemment votre ordre d'exécution soit:

1. Set canRun false
2. Démarrer la requête AJAX
3. Recevoir une réponse à la demande AJAX et faire quelque chose avec elle
4. Set canRun true

Comment faites-vous cela?

Set canRun true dans votre rappel en cours pour la requête AJAX (la fonction passée comme second argument à .load()) plutôt que immédiatement après l'appel à .load().