.ajaxStopコールバック関数が複数回実行されています

Question

jQueryを使用していますが、私のページ変数は、それが存在するために.ajaxStopコールバック関数で "page + = 1"を使用していても何度かインクリメントされています。最初に使用された後に複数回実行されます。その変数をFlickr APIに渡されたパラメータとして使用して、特定のデータページを取得します。

何が起きているかは、その関数が初めて呼び出されたときに、コールバック関数が1回実行されることです。私はその後、次の結果セットを得るために "more"ボタンから同じ関数を呼び出しますが、その関数は2回呼び出され、次回は3回呼び出されます。そういう意味では、ページ1を得ることができます。 2、4、7、11、等...私は呼んでいる

AJAX機能は、基本的.getJSON関数とそのコールバックメソッドで呼び出されるいくつかの余分な.getJSON関数[内側getPhotos（ID）]

あります

// This gets the user ID from a given Flickr user page URL and does some presentation stuff 
function getUserID() { 
    $("#moreRow").hide(350); 

    var usr = document.getElementById('user').value 
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json 
    $.getJSON(Req_addr, function(data) { 
     // Once the user is known, data about its photos is requested  
     getPhotos(data.user.id) 
    }); 

    // This hides the user data panel  
    $("#userInfo").hide(0); 

    // This hides the settings panel  
    $("#settings").hide(0, function() { 
     $("#loader").slideDown(750); 
    });  

    // This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop) 
    $("#photos").ajaxStop(function() { 
     // the page counter is incremented for the next page to be requested next time 
     page += 1 

     // Add the data for the newly obtained photos to the table 
     addPhotosToTable() 
    }); 
} 

私が間違っていることは何ですか？

あなたがここにソース全体を参照することができます。http://luisargote.com/flickr/javascript/argote_flickr.js

Answer 1

表示されるのは、.ajaxStop()がの新しいイベントハンドラを添付し、毎回新しいイベントハンドラを追加するためです。ただ、このように、（document.readyハンドラ内でまだ）外に移動：

// This gets the user ID from a given Flickr user page URL and does some presentation stuff 
function getUserID() { 
    $("#moreRow").hide(350); 

    var usr = document.getElementById('user').value 
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json 
    $.getJSON(Req_addr, function(data) { 
     // Once the user is known, data about its photos is requested  
     getPhotos(data.user.id) 
    }); 

    // This hides the user data panel  
    $("#userInfo").hide(0); 

    // This hides the settings panel  
    $("#settings").hide(0, function() { 
     $("#loader").slideDown(750); 
    }); 
} 

// This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop) 
$("#photos").ajaxStop(function() { 
    // the page counter is incremented for the next page to be requested next time 
    page += 1 

    // Add the data for the newly obtained photos to the table 
    addPhotosToTable() 
}); 

---

代替（何らかの理由で#photosが吹き飛ばさ取得した場合）、それは機能と使用の内側にある場合、それを残していますこのような.one()：

$("#photos").one("ajaxStop", function() { 

これは、あなたが望む効果を与え、それをバインド解除、一度ハンドラを実行します...しかし、要素がどこかに破壊取得されていない限り、（それがあるように、それは鳴らない）に固執一度外に縛る、理由がないo余分な仕事をする。

Answer 2

チェック$（「＃写真」）の長さの長さを、あなたのページは、そのリスト内の各項目ごとにインクリメントされ、あなたがしている何

Answer 3

詳細をリクエストするたびにajaxStopを再度バインドしています。

単にイベントバインディングをgetUserIdの外に移動し、ページの読み込み時に1回実行してください。

function getUserID() { 
    $("#moreRow").hide(350); 

    var usr = document.getElementById('user').value 
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json 
    $.getJSON(Req_addr, function(data) { 
     // Once the user is known, data about its photos is requested  
     getPhotos(data.user.id) 
    }); 

    // This hides the user data panel  
    $("#userInfo").hide(0); 

    // This hides the settings panel  
    $("#settings").hide(0, function() { 
     $("#loader").slideDown(750); 
    });  
} 

jQuery(document).ready(function ($) { 
    // This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop) 
    $("#photos").ajaxStop(function() { 
     // the page counter is incremented for the next page to be requested next time 
     page += 1 

     // Add the data for the newly obtained photos to the table 
     addPhotosToTable() 
    }); 
});