页面在一段时间后变为无响应

我的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

页面在一段时间后变为无响应

回答

相关问题