Unwated Multiple Calls

Question

我正在處理的代碼在不同的頁面上顯示一些消息。

頁是頁碼。

ActionGetMessages是一個Ajax請求。

PushMessage只是管理的內容。

下面是代碼：

function ShowMessages (page) { 

    var oMessages = ActionGetMessages (page); 

    for (var key in oMessages) { 
     if (key == "end") continue; 
     PushMessage (oMessages [key]); 
    } 

    var previous_page_button = document.getElementById ("previous_page_button"); 
    var next_page_button = document.getElementById ("next_page_button"); 

    if (page > 0) { 
     previous_page_button.style.display = "block"; 
     previous_page_button.addEventListener ("click", 
                function() { 
                 ShowMessages (page - 1); 
                }); 
    } 

    if (!oMessages ["end"]) { 
     next_page_button.style.display = "block"; 
     next_page_button.addEventListener ("click", 
                function() { 
                 ShowMessages (page + 1); 
                }); 
    } 
} 

調試這個代碼我注意到，用戶已導航後來回點擊（例如）有時頁下頁按鈕導致ShowMessages什麼的多個呼叫像那樣。

任何幫助將非常感激。

Answer 1

這並不完全清楚，我你與上面的代碼做什麼，但像有一些事件偵聽器連接，你不希望有多次你的描述，似乎給我。

事實上，當你點擊一個按鈕，它調用ShowMessages()會附加其他事件偵聽器按鈕每次單擊該按鈕。因此，在附加事件之前，請先嚐試刪除現有的偵聽器。看一看：

removeEventListener

，如果你確保沒有連接到按鈕事件添加事件偵聽器之前，它應該工作，並讓代碼執行的只是一個時間。

請記住，您將需要引用您的偵聽器才能將其刪除。你可以這樣說：

//Define this listener globally (anywhere outside your function) 
// so you can reference it anytime or keep track of the last 
// added listener somewhere. Otherwise you won't be able to 
// remove it. 
var myPreviousPageListener = function() { 
          ShowMessages (page - 1); 
         } 

previous_page_button.removeEventListener("click", myPreviousPageListener); 
previous_page_button.addEventListener ("click", myPreviousPageListener);