3

この JavaScript 関数を使用して、無限スクロール機能を備えた JSP ページを作成しています。

<script language="javascript" type="text/javascript">

var count = 0;

window.onload = loadSubPage;

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    alert("load appLeadershipSubView function calling");
        loadSubPage();
    }
});

function loadSubPage()
{
    alert("load appLeadershipSubView called");
        $.ajax({
        cache: false,
        url: 'appLeadershipSubView.do?count=' + count,
        async : true,
        beforeSend: function(){
        },
        success: function(html){
            alert("success event");
            $('#mainDiv').append(html);
            count++;
        },
        complete: function(){
        }
    }
    );
} 

</script>

ご覧のとおり、ページ内のloadSubPagehtml コンテンツを に追加する関数を呼び出しています。また、ページの Load イベントでも呼び出されます。appLeadershipSubView#mainDivloadSubPage

問題は、下にスクロールすると、loadSubPage関数が複数回 (2 回、場合によっては 3 回) 呼び出され、重複したデータが div に追加されることです。

私はJSPとJavascriptが初めてなので、ここで問題を理解できませんでした。ここの問題点を教えてください。

4

2 に答える 2

6

ブール値を追加して、アクティブなリクエストがないことを確認します。リクエストを行う前に、有効になっているかどうかを確認してください。

var isActive = false;
$(window).scroll(function(){
    if  (!isActive && $(window).scrollTop() == $(document).height() - $(window).height()){
    isActive = true;

コールバックで、isActive を false に設定します

success: function(html){
    $('#mainDiv').append(html);
    isActive = false;
于 2012-11-05T13:42:11.190 に答える
2

そのためには、アンダースコアのスロットル機能を使用したいと思います!

はるかにクリーンでハック的ではないため、コールバック-ブール値-リセット-マジックを実行するのではなく、アプリのロジックに集中できます。

于 2012-11-05T13:45:59.247 に答える