1

無限のギャラリーのようなものをやっています。私の OnScroll 関数は、スクロールがページの下部から 100 ピクセルにあるかどうかを検出します。その場合、ajax 呼び出しが実行され、出力が div に追加されます。

問題は、closeToBottom 関数が速すぎるため、スクロールが上に戻る前に、下から 100 ピクセルを 2 回または 4 ～ 5 回キャプチャすることがあります。

closeToBottom をより微妙にして、ajax 呼び出しが一度に 1 回だけ呼び出され、スクロールがすぐに上向きになるようにするにはどうすればよいですか?

function onScroll(event) {
    // Check if we're within 100 pixels of the bottom edge of the browser window.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom) {

        $.ajax({

                url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset,
                cache: false
        }).done(function( html ) {
            offset = offset + numberposts;
            $("#tiles").append(html);


        });
}
4

1 に答える 1

2

ajax リクエストが実行されているときに設定する変数を導入し、他に何も実行されていないときにのみ別のリクエストを開始することができます。そのようです：

var ajaxLoading = false;
function onScroll(event) {
    // Check if we're within 100 pixels of the bottom edge of the browser window.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom && !ajaxLoading) {
        ajaxLoading = true;
        $.ajax({

                url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset,
                cache: false
        }).done(function( html ) {
            offset = offset + numberposts;
            $("#tiles").append(html);
            ajaxLoading = false;

        });
}
于 2012-04-07T09:02:19.770 に答える