jquery - 与 jquery 1 和 2 不同，jquery 3 ajax 处理程序仅在完成处理程序代码后才执行新添加的 html+js

Question

我制作了一个 jsbin 来显示问题: http://jsbin.com/dexeqiz/edit?html,js,output

有这个html:

<div id='log'></div>
<div id='scripts'></div>

和js:

$.get('...', function(){
    $('#scripts')
        .append("<script>$(function(){$('#log').append('<p>3</p>');});<\/script>");
    $('#log').append('<p>1</p>');
    $('#log').append('<p>2</p>');
});

在 jquery 1 和 2 中

它将在#log中呈现:
3
1
2

但是在 jquery 3 中它会渲染
1
2
3

(因此只有在整个 ajax 处理程序完成后才添加 3)

这是一个问题，因为有时我的代码期望在调用下一行之前执行前一行中附加的代码

<小时/>

现在我唯一的解决方法是将代码放在 .append(newhtml) 之后的 setTimeout 内，但我不想这样做，因为它看起来稍微慢一些对于用户来说。我更愿意有类似 $.when(append).done(function(){code})

更新:似乎发生这种情况是因为从 jQuery 3 脚本开始文档准备 $(function(){}); 加载异步( https://github.com/jquery/jquery/issues/1895 )并且这是我当前的解决方案:http://jsbin.com/xayitec/edit?html,js,output

Answer 1

经过所有的摆弄，它脱颖而出:这个问题没有真正的解决方案；至少没有一个不是很黑客或不改变整个设置/工作流程。

为了完整起见，我保留“答案”不变(请参阅“日志”下面的所有内容)并添加一些背景信息。

• https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous

  The document-ready processing in jQuery has been powered by the jQuery.Deferred implementation since jQuery 1.6. As part of jQuery 3.0's alignment with the Promises/A+ standard, document-ready handlers are called asynchronously even if the document is currently ready at the point where the handler is added. This provides a consistent code execution order that is independent of whether the document is ready or not.

• https://github.com/jquery/jquery/issues/3773#issuecomment-325999054

  Since you're wrapping code in your script tag in $, you can also wrap the other lines:

  $.get('...', function(){
$('#somediv')
.append(
"somehtml<script>$(function(){$('#log').append('<p>3</p>');});\/script>"
);
$(function(){
$('#log').append('<p>1</p>');
$('#log').append('<p>2</p>');
}); });

  I'd try to not rely on such order too much, though, such code can get quite brittle. I think we technically don't guarantee that order is preserved but that's the case right now.

  Often a better solution is to put scripts at the end of body and then wrapping functions in $ is not necessary.

• https://github.com/jquery/jquery/issues/1895
• https://github.com/jquery/jquery/pull/2126

<小时/>

还有一个想法 - 非常hackish

您可以搜索要附加的字符串中的所有脚本。然后使用正则表达式搜索所有出现的“$( function(){...} )”，然后插入一个类似“$( function(){...;executionHandler()} )”的函数，该函数将倒计时，直到所有这些构造都出现已解决，然后将外部 promise 设置为已解决。但正如我一开始所说的那样，这将是相当黑客的，而且也可能很容易出错。

<小时/>

日志

版本 1、2、2.1 和 3 均已使用 jQuery 版本 1.12.4、2.2.4 和 3.2.1 进行了测试，并且应该可以与 jQuery 1.8 及更高版本的所有版本正常工作。 p>

Version 1

$.get('...', function(){

    // make shure that $Deferred is in scope of all involved functions
    window.$Deferred = $.Deferred(); // get jQuery deferred object

    $('#scripts').append(
        "hi<script>$(function(){$('#log').append('<p>3</p>');});<\/script>" + // append your common stuff
        "<script>$(function(){$Deferred.resolve();})<\/script>" // add this line to resolve window.$Deferred
    );

    $Deferred.always(function() {
        // execute code after $Deferred was resolved or rejected
        $('#log').append('<p>1</p>');
        $('#log').append('<p>2</p>');
    });

});

Version 2

被踢了

<小时/>

Version 3

// $.get returns a jqXHR object which is a promise-compatible object
$.when($.get('...', function() {
    $('#scripts').append(
        "hi<script>$(function(){$('#log').append('<p>3</p>');});<\/script>"
    )
})).always(function( data, textStatus, jqXHR|errorThrown ) {
    // execute code when $.get is done or fails
    $('#log').append('<p>1</p>');
    $('#log').append('<p>2</p>');
});

或者另一种选择

$.when($.get('...', function() {
    $('#scripts').append(
        "hi<script>$(function(){$('#log').append('<p>3</p>');});<\/script>"
    )
})).then(
    function( data, textStatus, jqXHR ) {
        // success callback
    },
    function( jqXHR, textStatus, errorThrown ) {
        // fail callback
    }
);

详细信息

• jQuery.when( deferreds )

  Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.
  [...]
  For example, the jqXHR object returned by jQuery.ajax() is a Promise-compatible object and can be used [...]

• jQuery.get( url [, data ] [, success ] [, dataType ] )

  [...] is a shorthand Ajax function [...]

• deferred.always( alwaysCallbacks [, alwaysCallbacks ] )

  Add handlers to be called when the Deferred object is either resolved or rejected.

• deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

  Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.

<小时/>

引用文献

• jQuery.Deferred()
• deferred.when()
• deferred.then()
• deferred.always()
• jQuery.ajax()
• jQuery.get()