popstate HTML 5 事件被多次觸發

Question

您好我正在使用以下代碼使用 jquery 動態加載頁面的一部分

loadNextBackInPage_URL = null;
function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);
        window.addEventListener("popstate", function(e) {
        alert('s');
        loadNextBackInPage(location.pathname);
        });
    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');


}

加載部分，甚至更改瀏覽器 URL 正在工作。 但為什么 PoP state function 會被多次觸發？

我最初通過 onclick function 調用 loadNextBackInPage()。

Answer 1

我在編碼論壇中從這里解決了

認為您一遍又一遍地添加“popstate”偵聽器...

程序邏輯：

1. 頁面加載
2. onclick 將執行 loadNextBackInPage()
3. 啟動 $.post() 請求並在完成時觸發“callBackFunctionLoadNextBackInPage”
4. 推狀態（）
5. 為“popstate”注冊一個事件監聽器
6. 當“popstate”觸發時，執行 loadNextBackInPage() 並返回步驟 2

因此，第 4 步將一遍又一遍地執行，這將注冊新的事件偵聽器。 每次“popstate”觸發時，所有的事件監聽器都會執行

嘗試將 addEventListener 方法調用移出此循環

所以從那些我得出一個解決方法，並將location.pathname更正為location.href

更正后的代碼：

loadNextBackInPage_URL = null;
popEventListnerAdded = false;


function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);  
        if(!popEventListnerAdded) {
            window.addEventListener("popstate", function(e) {
            loadNextBackInPage(location.href);
            });
            popEventListnerAdded = true;
        }

    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}