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);