2

ユーザーがページの一番下までスクロールしたときにニュースを表示する「一番下までスクロール」ニュースフィードを作成しています。

私は次のコードを持っています（ユーザーが一番下までスクロールしたかどうかを確認する）：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       //Ajax Request
   }
});

ニュースを入力するためのajaxリクエストが実行される前に、ユーザーが上にスクロールしてからもう一度下にスクロールしないようにするにはどうすればよいですか。言い換えれば、ajaxリクエストが完了し、その結果が入力されるまで一時停止するクリーンな方法は何ですか？

4

5 に答える 5

3

このようなもの：

var request_pending = false;

function at_bottom_of_page() {
    return $(window).scrollTop() + $(window).height() > $(document).height() - 100;
}

$(window).scroll(function() {
    if (request_pending) {
        return;
    }               
    if (at_bottom_of_page()) {
        request_pending = true;
        doAjax(function (moar_news) {
            render_news(moar_news);
            request_pending = false;
        });
    }
});
于 2013-01-04T17:45:39.907 に答える
0

それ自体は答えではありませんが、コメントにうまく収まらないメモです。

IE6 / IE7 / IE8の場合、.scrollは実際にはうまく機能せず、各スクロールでコールバックを数十回（数百回ではないにしても）呼び出します。.detachedScroll私たちのプロジェクトでは、この動作を防ぐために呼び出されるラッパー関数を使用します。

/**
* Detached scroll prevents freezing in IE<=8
*/
if($.browser.msie && parseInt($.browser.version, 10) <= 8) {
    $.fn.scrollDetached = function(callback) {
        return $(this).each(function() {
            var oThis = this;
            clearInterval(this.detachedScrollInterval);
            this.detachedScrollInterval = setInterval(function() {
                if (oThis.hasScrolled) {
                    oThis.hasScrolled = false;
                    // Calling detached scrolling callback
                    callback();
                }
            }, 500);
            $(this).scroll(function() {
                // There was a scrolling event
                oThis.hasScrolled = true;
            });
        });
    };
} else {
    $.fn.scrollDetached = $.fn.scroll;
}
于 2013-01-04T17:49:49.033 に答える
0

.off()イベントハンドラを削除するために使用できます。

var attachEvent = function(){

    $(window).scroll(function() {

        $(window).off("scroll");
        $.ajax("example.php").done(function() { 

            //If you want to reattach event
            attachEvent(); 
        });            
    });
};

attachEvent();
于 2013-01-04T17:51:45.100 に答える
0

変数を使用して、未処理のajaxリクエストが存在するかどうかをマークするだけです。その場合は、別のリクエストを行わないでください。それ以外の場合は、データをフェッチします。私の考えでは、ユーザーにスクロールさせて、UIをブロックする理由を説明します。その場合、それは同期呼び出しを行うようなものです。

var isLoading = false;
//event handler
$(window).scroll(function () {
   // check height..
   // make an ajax request if isLoading is false
   if (!isLoading) {
       $.ajax(/* .. */, success: function () {
           isLoading = false;
       }, 
       error: function () {
           isLoading = false;
       });
       isLoading = true;
   }
}

それでもajax応答までイベントのリッスンを停止したい場合は、バインディングを削除して、ajax応答ハンドラーに再度アタッチします。

var isLoading = false;
addScrollEvent();

function scrollHandler(e) {
   // check height..
   // make an ajax request if isLoading is false
   if (!isLoading) {
       $.ajax(/* .. */, success: function () {
           isLoading = false;
           addScrollEvent();
       }, 
       error: function () {
           isLoading = false;
           addScrollEvent();
       });
       $(window).off('scroll', scrollHandler);
   }
}

function addScrollEvent() {
    $(window).on('scroll', scrollHandler);
}
于 2013-01-04T17:45:49.767 に答える
0

AJAXリクエストを行う前に、scrollハンドラーのバインドを解除してください。AJAX応答を処理した後、scrollハンドラーを再バインドします。scrollハンドラーに名前を付けて、バインド解除と再バインドを有効にする必要があります。

$(window).scroll(function scrollHandler() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $(window).off("scroll", scrollHandler);
        $.ajax({
            ...
            complete: function() {
                $(window).scroll(scrollHandler);
            }
        });
    }
});
于 2013-01-04T17:49:27.900 に答える