不需要的多个呼叫答案

【问题标题】：Unwanted Multiple Calls不需要的多个呼叫
【发布时间】：2013-08-06 10:35:28
【问题描述】：

我正在编写的代码在不同的页面上显示一些消息。

page 是页码。

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 或类似的东西。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript recursion events dom-events

【解决方案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);

【讨论】：