событие 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 запускается несколько раз?

Я вызываю loadNextBackInPage () первоначально через функцию onclick.

Answer 1

Я понял это отсюда в кодирующих форумах

думаю, что вы продолжаете добавлять "popstate" слушатели снова и снова ...

Логика программы:

1. Страница загружена
2. onclick выполнит loadNextBackInPage ()
3. Запустить запрос $ .post () и запустить «callBackFunctionLoadNextBackInPage» по завершении
4. PushState ()
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');
}