頁面在一段時間後變爲無響應

我的jQuery/Javascript代碼有問題。所有預期的工作，但一段時間後，該頁面變得沒有反應，拋出了jQuery的Unresponsive Script錯誤。我正在使用jQuery Library將列表顯示爲封面。頁面在一段時間後變爲無響應

此外，在所有後端調用之後，我必須刷新特定的div，因此每次調用後端時都會銷燬並重新創建div。

請讓我知道什麼是下面給出的代碼的結構問題：

（請注意，這僅僅是一個重要的方法片段所有這些方法也有寫在他們的其他邏輯是不是。顯示在這裏）。

function showAllData(dataFromServer) { 
 
    $('#child').remove(); 
 
    $('#parent').append($('<div id="child"></div>')); 
 

 
    $.each(dataFromServer.someArray, function(index, item) { 
 
    var html = '<li>' + item + '</li>'; 
 
    $('#child').append($(html)); 
 
    }); 
 

 
    //Attach Event to div 
 
    $("#child").on("click", function() { 
 
    removeTag(); 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
    //got data from server(Spring MVC) in a var 'dataFromServer' 
 
    //code not written here 
 
    showAllData(dataFromServer); 
 
    $("#child").flipster(); //a coverflow library \t 
 
}); 
 

 

 
$(document).on('submit', '#formSubmit', function(event) { 
 
    event.preventDefault(); 
 
    $.ajax({ 
 
    url: url, 
 
    contentType: 'application/json; charset=utf-8', 
 
    dataType: 'json', 
 
    async: true, 
 
    cache: false, 
 
    data: JSON.stringify({ 
 
     dataFromClient: dataFromServer 
 
    }), 
 
    type: "POST", 
 
    success: function(data) { 
 
     dataFromServer = data; 
 
     showAllData(dataFromServer); 
 
     $("#child").flipster(); 
 
    }, 
 
    error: function(xhr, status, error) { 
 
     console.log(xhr.responseText); 
 
    } 
 
    }); 
 
    return false; 
 
}); 
 

 
function removeTag() { 
 
    $.ajax({ 
 
    url: 'deleteBooks', 
 
    contentType: 'application/json; charset=utf-8', 
 
    dataType: 'json', 
 
    async: true, 
 
    cache: false, 
 
    data: JSON.stringify({ 
 
     keyword: tag, 
 
     dataFromClient: dataFromServer 
 
    }), 
 
    type: "POST", 
 
    success: function(data) { 
 
     dataFromServer = data; 
 
     showAllData(dataFromServer); 
 
     $("#child").flipster(); 
 
    }, 
 
    error: function(xhr, status, error) { 
 
     console.log(xhr.responseText); 
 
    } 
 
    }); 
 
};

任何想法？

[編輯]：在移動設備上訪問網站時會發生這種情況。頁面凍結！但是，在使用桌面版時，頁面在一段時間後變爲無響應，並且出現錯誤Maximum Call Stack Size Reached錯誤。

這可能是因爲智能手機的記憶。儘管如此，兩個版本都存在問題。

來源

2016-02-08 Jagrut

當您嘗試在js中運行長循環時，通常會發生無響應的腳本錯誤。嘗試使用某種延遲加載來縮短循環次數。在滾動你可以添加更多的數據。 – chrisgiffy

@chrisgiffy所有數據均以屏幕尺寸顯示。所以沒有滾動。另外，我沒有很多循環，並且所有這些循環都被控制在無限的範圍內。我不確定附加事件或類似的事情。 – Jagrut

請參見：[使用時間線進行性能分析]（https：//開發人員。chrome.com/devtools/docs/timeline） – Roberto

你有一些遞歸正在進行，其中正在成倍增加#child.click()處理程序。我製作了這個jsFiddle來簡化您的代碼並演示正在發生的事情。打開控制檯，點擊'提交'開始，然後在其中一個列表項上點擊幾下。您會看到每次點擊後，控制檯輸出的行數越來越多。

嘗試移動$("#child").on("click"...){}function showAllData(){}

更新之外：所以您刪除並重新添加後的處理工作#child您可以添加點擊監聽器是這樣的：

$('#parent').on('click', '#child', function() { 
    // 
});

我我把這個更新到jsFiddle。

更新2：我看到Flipster沒有重新初始化刷新#child後，用此想出了：

變化$("#child").flipster();到$("#parent").flipster();。然後在showAllData()做$('#child').remove()後：

// remove the flipster classes from #parent or flipster will not re-initialise when called next time. 
$('#parent').removeClass('flipster').removeClass(function(index, css) { 
    return (css.match(/(^|\s)flipster-\S+/g) || []).join(' '); 
});

我把這個在codePen。

來源

2016-02-08 12:35:48 Lesley

如果我這樣做，它第一次運行良好，但在我的ajax調用後，事件不會被解僱。 – Jagrut

是的，我看到了問題...很好。然而，爲什麼在showAllData（）中添加click處理程序會立即觸發？這對我來說並不明顯。 – Roberto

如果我按照這個答案建議的話，它不會立即觸發。當我點擊元素時會觸發它。但經過一次ajax調用後，它不再被解僱。 – Jagrut

頁面在一段時間後變爲無響應

回答

相關問題