1

私は自分で一種の無限のスクロールを作ろうとしています。Infiniteを使用しない理由は、Wordpressで使用しないためです。

on。（）メソッドを使用する必要があることを除いて、機能していますが、その方法がわかりません。

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
        $('.wait-please').show();
        latestTask();
    }
});

function latestTask()
{
    $id = $(".latestTask:last").attr("taskid");
    $.post("/includes/classes/handler.php?do=lastTask", { lastId : $id },
    function(data){
        if(data){
            //alert(data);
            $('.latestTask:last').after(data);
        }
        $('.wait-please').hide();
    });
}

関数latestTaskはphpスクリプトを呼び出します。ここで、すべての新しい投稿をエコーし​​ます。問題は、新しい要素をバインドするためにon。（）メソッドを実行する必要があるため、同じ10を呼び出し続けることです。

しかし、この状況でOnをどこでどのように使用しますか？私が見るものについては、クリックのようなイベントを指定する必要があります。しかし、クリックイベントはありませんか？

取得したデータの構造は次のとおりです。

echo "<div style='font-size:20px;color:#f90;' class='latestTask' taskid='$row[lookupId]'>$row[lookupId]</div>";

アップデート

スクロール時に取得するidの行は次のとおりです。

75 74 73 75 74 73 72 71 70 72 71 70 69 68 67 66 65 64 66 65 64 63 62 61 63 62 61 60 57 55 60 57 55 43 40 38 43 40 38 33 29 22 33 29 22

ご覧のとおり、データベース呼び出しから非常に奇妙な結果がいくつかあります：72、71、70、72、70。そして、ユーザーが「ダブルスクロール」できないようにする必要があるようです。しかし、どうやって？

4

1 に答える 1

2

ajaxリクエストを2回起動しないように注意してください。

ページ全体の動作を確認せずに、なぜこれが発生するのかを理解するのは困難です。

これを試して

var fetchingTasks = false;

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
        $('.wait-please').show();
        if (!fetchingTasks) {
          fetchingTasks = true;
          latestTask();
        }
    }
});

function latestTask()
{
    $id = $(".latestTask:last").attr("taskid");
    $.post("/includes/classes/handler.php?do=lastTask", { lastId : $id },
    function(data){
        if(data){
            //alert(data);
            $('.latestTask:last').after(data);
        }
        $('.wait-please').hide();
        fetchingTasks = false;
    });
}
于 2012-04-12T12:31:36.643 に答える