jQuery JavaScript console.log 导致错误：“主线程上的同步 XMLHttpRequest 已弃用...”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24639335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..."
提问by Nathan Basanese
I have been adding logs to the console to check the status of different variables without using the Firefox debugger.
我一直在向控制台添加日志，以在不使用 Firefox 调试器的情况下检查不同变量的状态。
However, in many places in which I add a console.login my main.jsfile, I receive the following error instead of my lovely little handwritten messages to myself:
然而，在我console.log在main.js文件中添加 a 的许多地方，我收到以下错误而不是我给自己的可爱的小手写消息：
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/
主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助http://xhr.spec.whatwg.org/
What alternatives to or wrappers for console.logcan I add to my code use that will not cause this error?
我可以将哪些替代品或包装器console.log添加到我的代码使用中而不会导致此错误？
Am I "doing it wrong"?
我“做错了”吗？
回答by kroolk
This happened to me when I was being lazy and included a script tag as part of the content that was being returned. As such:
当我懒惰并在返回的内容中包含一个脚本标记时，这发生在我身上。像这样：
Partial HTML Content:
部分 HTML 内容：
<div>
SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script>
It appears, at least in my case, that if you return HTML content like that via xhr, you will cause jQuery to make a call to get that script. That call happens with an async flag false since it assumes you need the script to continue loading.
看来，至少在我的情况下，如果您通过 xhr 返回这样的 HTML 内容，您将导致 jQuery 调用以获取该脚本。该调用使用 async 标志 false 发生，因为它假定您需要脚本继续加载。
In situations like this one you'd be better served by looking into a binding framework of some kind and just returning a JSON object, or depending on your backend and templating you could change how you load your scripts.
在这种情况下，您最好通过查看某种绑定框架并返回一个 JSON 对象，或者根据您的后端和模板，您可以更改加载脚本的方式。
You could also use jQuery's getScript()to grab relevant scripts. Here is a fiddle, It's just a straight copy of the jQuery example, but I'm not seeing any warnings thrown when scripts are loaded that way.
您还可以使用jQuerygetScript()来获取相关脚本。这是一个小提琴，它只是 jQuery 示例的直接副本，但是当以这种方式加载脚本时，我没有看到任何警告。
Example
例子
<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>
回答by PedanticDan
The warning message MAY BE due to an XMLHttpRequest request within the main thread with the async flag set to false.
警告消息可能是由于主线程中的 XMLHttpRequest 请求将 async 标志设置为 false。
https://xhr.spec.whatwg.org/#synchronous-flag:
https://xhr.spec.whatwg.org/#synchronous-flag：
Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.
工作人员外部的同步 XMLHttpRequest 正在从 Web 平台中删除，因为它对最终用户的体验有不利影响。（这是一个漫长的过程，需要很多年。）当 JavaScript 全局环境是文档环境时，开发人员不得为 async 参数传递 false。强烈鼓励用户代理警告开发人员工具中的此类使用，并在发生时尝试抛出 InvalidAccessError 异常。
The future direction is to only allow XMLHttpRequests in worker threads. The message is intended to be a warning to that effect.
未来的方向是在工作线程中只允许 XMLHttpRequests。该消息旨在警告该效果。
回答by Irfan Ashraf
I was also facing same issue but able to fix it by putting async: true. I know it is by default true but it works when I write it explicitly
我也面临同样的问题，但能够通过放置 async: true 来解决它。我知道默认情况下它是真的，但是当我明确地写它时它会起作用
$.ajax({
async: true, // this will solve the problem
type: "POST",
url: "/Page/Method",
contentType: "application/json",
data: JSON.stringify({ ParameterName: paramValue }),
});
回答by Charlie
Visual Studio 2015/2017's live debugger is injecting code that contains the deprecated call.
Visual Studio 2015/2017 的实时调试器正在注入包含已弃用调用的代码。
回答by Dem Pilafian
Sometimes it's necessary to ajax load a script but delay document readyuntil after the script is loaded.
有时需要 ajax 加载脚本但将文档准备好延迟到脚本加载后。
jQuery supports this with the holdReady()function.
jQuery 通过holdReady()函数支持这一点。
Example usage:
用法示例：
$.holdReady(true); //set hold
function releaseHold() { $.holdReady(false); } //callback to release hold
$.getScript('script.js', releaseHold); //load script then release hold
The actual script loading is asynchronous (no error), but the effect is synchronous if the rest of your JavaScript runs after document ready.
实际的脚本加载是异步的（没有错误），但如果您的 JavaScript 的其余部分在document ready之后运行，则效果是同步的。
This advanced featurewould typically be used by dynamic script loaders that want to load additional JavaScript such as jQuery plugins before allowing the ready event to occur, even though the DOM may be ready.
这种高级功能通常由动态脚本加载器使用，它们希望在允许就绪事件发生之前加载额外的 JavaScript（例如 jQuery 插件），即使 DOM 可能已就绪。
Documentation:
https://api.jquery.com/jquery.holdready
文档：https:
//api.jquery.com/jquery.holdready
UPDATE January 7, 2019
2019 年 1 月 7 日更新
From JQMIGRATE:
jQuery.holdReady() is deprecated
Cause:The
jQuery.holdReady()method has been deprecated due to its detrimental effect on the global performance of the page. This method can prevent all the code on the page from initializing for extended lengths of time.Solution:Rewrite the page so that it does not require all jQuery ready handlers to be delayed. This might be accomplished, for example, by late-loading only the code that requires the delay when it is safe to run. Due to the complexity of this method, jQuery Migrate does not attempt to fill the functionality. If the underlying version of jQuery used with jQuery Migrate no longer contains
jQuery.holdReady()the code will fail shortly after this warning appears.
不推荐使用 jQuery.holdReady()
原因：该
jQuery.holdReady()方法已被弃用，因为它对页面的全局性能有不利影响。此方法可以防止页面上的所有代码在很长一段时间内初始化。解决方案：重写页面，使其不需要延迟所有 jQuery 就绪处理程序。例如，这可以通过在安全运行时仅延迟加载需要延迟的代码来实现。由于此方法的复杂性，jQuery Migrate 不会尝试填充该功能。如果与 jQuery Migrate 一起使用的 jQuery 底层版本不再包含
jQuery.holdReady()此警告，代码将在出现此警告后不久失败。
回答by Sonu K
To avoid this warning, do not use:
为避免此警告，请勿使用：
async: false
in any of your $.ajax() calls. This is the only feature of XMLHttpRequest that's deprecated.
在您的任何 $.ajax() 调用中。这是 XMLHttpRequest 唯一不推荐使用的功能。
The default is
默认是
async: true
回答by dev101
@Webgr partial answer actually helped me debug this warning @ console log, shame the other part of that answer brought so many downvotes :(
@Webgr 部分答案实际上帮助我调试了这个警告@控制台日志，可耻的是该答案的另一部分带来了如此多的反对:(
Anyway, here is how I found out what was the cause of this warning in my case:
无论如何，以下是我如何找出在我的案例中出现此警告的原因：
- Use Chrome Browser > Hit F12 to bring DevTools
- Open the drawer menu(in Chrome 3 vertical dots in the upper right)
- Under Console> check Log XMLHttpRequestsoption
- Reload your page that was giving you the error and observe what happens on each ajax request in the console log.
- 使用 Chrome 浏览器 > 按 F12 带 DevTools
- 打开抽屉菜单（在 Chrome 右上角的 3 个垂直点）
- 在控制台下> 检查Log XMLHttpRequests选项
- 重新加载出现错误的页面，并观察控制台日志中每个 ajax 请求发生的情况。
In my case, another plugin was loading 2 .js librariesafter each ajax call, that were absolutely not required nor necessary. Disabling the rogue plugin removed the warning from the log. From that point, you can either try to fix the problem yourself (e.g. limit the loading of the scripts to certain pages or events - this is way too specific for an answer here) or contact 3rd party plugin developer to solve it.
就我而言，另一个插件在每次 ajax 调用后加载 2 个.js 库，这绝对不是必需的。禁用流氓插件会从日志中删除警告。从那时起，您可以尝试自己解决问题（例如，将脚本的加载限制为某些页面或事件 - 这对于这里的答案来说太具体了）或联系 3rd 方插件开发人员来解决它。
Hope this helps someone.
希望这可以帮助某人。
回答by Yoweli Kachala
I have been looking at the answers all impressive. I think He should provide the code that is giving him a problem. Given the example below, If you have a script to link to jquery in page.php then you get that notice.
我一直在看的答案都令人印象深刻。我认为他应该提供给他带来问题的代码。给定下面的示例，如果您有一个脚本链接到 page.php 中的 jquery，那么您会收到该通知。
$().ready(function () {
$.ajax({url: "page.php",
type: 'GET',
success: function (result) {
$("#page").html(result);
}});
});
回答by Andris
I get such warning in following case:
我在以下情况下收到这样的警告：
1) file1 which contains <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Page has input fields. I enter some value in input field and click button. Jquery sends input to external php file.
1) 包含<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. 页面有输入字段。我在输入字段中输入一些值并单击按钮。Jquery 将输入发送到外部 php 文件。
2) external php file also contains jquery and in the external php file i also included <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Because if this i got the warning.
2) 外部 php 文件也包含 jquery，在外部 php 文件中我也包含了<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. 因为如果这是我收到警告。
Removed <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>from external php file and works without the warning.
<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>从外部 php 文件中删除并在没有警告的情况下工作。
As i understand on loading the first file (file1), i load jquery-1.10.2.jsand as the page does not reloads (it sends data to external php file using jquery $.post), then jquery-1.10.2.jscontinue to exist. So not necessary again to load it.
正如我在加载第一个文件（file1）时所理解的jquery-1.10.2.js那样，我加载并且页面没有重新加载（它使用 jquery 将数据发送到外部 php 文件$.post），然后jquery-1.10.2.js继续存在。所以没有必要再次加载它。
回答by Misi
In a MVC application, I got this warning because I was opening a Kendo Window with a method that was returning a View(), instead of a PartialView(). The View() was trying to retrive again all the scripts of the page.
在 MVC 应用程序中，我收到此警告是因为我打开了一个使用返回 View() 而不是 PartialView() 的方法的 Kendo Window。View() 试图再次检索页面的所有脚本。
