javascript - 一段时间后页面变得无响应

Question

我的 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	
});


$(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 中.