2012-03-08 5 views
1

私は最新のJQueryを使用しています。問題は、ユーザーがあまりにも速くスクロールしてスクリプトが2回連続して発生した場合です。ユーザーが通常の速度または非常にゆっくりとスクロールすると、スクリプトは正常に動作します。私はページの下部にjsを持っています。関数を呼び出すときにタイムアウトを追加しましたが、タイムアウトを待ってからスクリプトを2回繰り返すだけです。繰り返すことはいつも起こるわけではありません。スクロールの高さの-10pxで関数を呼び出す設定があります。また、ロード中のgifをロードしようとしても、gifのロードが遅れても動作していないようです。これが起こらないようにする方法はありますか?カスタム無限スクロールスクリプトでJQueryスクリプトが繰り返されないようにする方法

<body> 
    <div class="contentholderwrap"></div> 

    <div id="dataresult"></div> 

</body> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     function lastPostFunc(){ 
      var endid = $(".contentholderwrap:last").attr("id"); 
      if (endid != "1000000000000") { 
       $.post("main.php?lastid="+$(".contentholderwrap:last").attr("id"), function(data) { 
        if (data != ""){ 
         $(".contentholderwrap:last").after(data); 
        } 
        $('#dataresult').empty(); 
       }); 
      } 
     }; 

    $(window).scroll(function(){ 
     if ($(window).scrollTop() >= $(document).height() - $(window).height() -10){ 
      setTimeout(lastPostFunc, 500); 
     } 
    }); 
}); 
</script> 

答えて

4

それがなかった、すべての関数呼び出し遅れだったが、それはまだ.scrollイベントが発生するたびに1をキューに入れられているためあなたのタイムアウトが動作しませんでした。以前ならば、それは何もしませんように

var timerid = null; 
$(window).scroll(function(){ 
    if (timerid === null && 
     $(window).scrollTop() >= $(document).height() - $(window).height() -10){ 
     lastPostFunc(); 
     timerid = setTimeout(function() { timerid = null; }, 500); 
    } 
}); 

はまた、あなたのlastPostFunc()機能を更新することができます:あなたは遅れを実装したい場合には、一定期間内に複数の要求を防ぐためにsetTimeout()を使用する必要がありますAjaxリクエストはまだ進行中である:

var ajaxInProgress = false; 
function lastPostFunc(){ 
    if (ajaxInProgress) return; 

    var endid = $(".contentholderwrap:last").attr("id"); 
    if (endid != "1000000000000") { 
     $.post("main.php?lastid="+endid, function(data) { 
      if (data != ""){ 
       $(".contentholderwrap:last").after(data); 
      } 
      $('#dataresult').empty(); 
      ajaxInProgress = false; 
     }); 
     ajaxInProgress = true; 
    } 
} 

(。第三の選択肢は無限スクロールは本当に迷惑なことなので、代わりに「ロードより」ボタン/リンクを使用することができることを是認することがある)

+0

さて、この停止はスクロール全部。下にスクロールすると、何も起こりません。 FirefoxでFirebugを使用してデバッグしましたが、エラーは発生していません。 – Patriotec

+0

最初の変更(タイムアウト)または2回目の変更(ajax)を使用しましたか?更新されたコードのコピーを、http://jsbin.comやhttp://jsfiddle.netなどのどこかに表示することができますか? – nnnnnn

+0

lastpost関数の最後に、)がありました。スクロールすると、タイマーの遅延が無視されます。関数をすぐに呼び出すscroll関数でfunction()を使用しました。 ()を削除すると、関数は呼び出されません。だから私は遅れていないと思いますか? – Patriotec

関連する問題