Question

我正在使用带有大量Ajax调用的JQuery开发前端Web应用程序。我的问题是，每当Chrome devtools关闭时，应用程序就无法正常工作（尤其是附加了Ajax的内容）。另一方面，当Chrome devtools打开时，一切都很好。

我已经阅读了一些类似的帖子，起初他们很有帮助，但现在我遇到了同样的问题而且我不确定原因。

注意：

1）所有Ajax调用都设置为cache：false，如建议的here。

2）我已经删除了我在另一篇文章中建议的所有控制台日志，我找不到了。

这两项建议暂时有效，但现在我就离开了。 关于Chrome devtools如何干扰Ajax的任何其他建议？

Answer 1

因此，似乎某些JQuery方法（.hover（）,. click（）等）未应用于某些Ajax内容，并且正在使用.load（）加载HTML。我以为我可以安全地解决这个问题：

1）在 window.onload 处理函数中包装适用于Ajax内容的代码

2）委派所有相关的事件处理程序

   window.onload = function() {
      $(document).on("click","#id",function(){//do stuff});
      doSomethingElse();
   };

在尝试了一些事情后，我最终使用 .ajaxComplete（） JQuery方法代替window.onload，如下所示：

        $(document).ajaxComplete(function(event, xhr, settings) {
            if (settings.url.startsWith("https:...[static portion of URI]")) {
                $(document).on("click","#id",function(){//do stuff});
                doSomethingElse();
            }
        });

有效。这里的if语句是在调用I部分遇到问题的第一个Ajax调用时触发的（其他Ajax调用在第一次调用中从complete（）调用链接）。

那么，这与Chrome开发工具有什么关系？

原来，它没有直接关系。我能够在Firefox和Opera中重现这个问题。在Firefox和Opera中，问题不那么频繁，开发人员工具的开放并没有对性能产生太大影响。在Chrome中，开放的devtools产生了显着的差异，我不相信问题甚至发生过一次。

Chrome devtools关闭时，Web应用程序无效

1 个答案: