一段時間后頁面無響應

Question

我的jQuery / JavaScript代碼有問題。 一切正常，但是一段時間后頁面變得無響應，並拋出jQuery Unresponsive Script錯誤。 我正在使用jQuery庫將列表顯示為Coverflow。

另外，在所有對后端的調用之后，我必須刷新特定的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 }); $(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錯誤。

這可能是由於智能手機的內存。 盡管如此，兩個版本都存在問題。

Answer 1

您正在進行一些遞歸操作，它以指數方式添加了#child .click()處理函數。 我做了這個jsFiddle來簡化您的代碼並演示正在發生的事情。 打開控制台，單擊“提交”開始，然后在列表項之一上單擊幾次。 您將看到每次單擊，控制台將輸出越來越多的行。

嘗試將$("#child").on("click"...){}到function showAllData(){}

更新 ：為了使處理程序在刪除並重新添加#child之后可以工作，您可以像這樣添加點擊偵聽器：

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

我把它放在更新的jsFiddle中 。

更新2 ：刷新#child並提出以下建議后，我發現Flipster並未重新初始化：

更改$("#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中 。