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

不需要的多次通话

1 个答案: