Question

这会向Data元素和控制台输出456（如预期的那样）：

function getData() {
  jQuery('#Data').html(456);
}

jQuery(function($) {
  getData();
  console.log($('#Data').html());  //456
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Data">123</div>

<小时/> 这将456输出到Data元素，但控制台将其显示为123：

function getData() {
  jQuery(function($) {
    $('#Data').html(456);
  });
} //getData    

jQuery(function($) {
  getData();
  console.log($('#Data').html());  //123
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Data">123</div>

<小时/> 将console.log()置于超时时间会修复它：

function getData() {
  jQuery(function($) {
    $('#Data').html(456);
  });
} //getData    

jQuery(function($) {
  getData();
  setTimeout(function() {
    console.log($('#Data').html());  //456
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Data">123</div>

<小时/> 我可以解决这个问题，但这很令人惊讶。

这是一个错误还是预期的功能？

Answer 1

这是预期的功能。当你这样做

function getData() {
  jQuery(function($) {
    $('#Data').html(456);
  });
}

您正在为事件附加处理程序。即，文档就绪事件。那是因为

jQuery(function($){
});

是

的简写

jQuery(document).ready(function($){
});

你这样做了两次。通常一旦你做了

jQuery(function($) {
  getData();
  console.log($('#Data').html());  //123
});

并在该处理程序中，在调用getData时附加另一个处理程序。

因此，console.log在你执行的附加的下一个事件处理程序之前执行。

Answer 2

我现在意识到自己的错误，感谢@AmmarCSE的帮助。

我有自己的美元符号功能，我在某些功能中一直在这样做，以便我可以使用jQuery的功能：

jQuery(function($) {
});

我应该做的是：

(function($) {
})(jQuery);

然后一切都按预期工作：

＆＃13;

function getData() {
  (function($) {
    $('#Data').html(456);
  })(jQuery);
} //getData    

(function($) {
  getData();
  console.log($('#Data').html());  //456
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Data"></div>

＆＃13;

jQuery函数异步执行

2 个答案: