Question

假设我有这段代码：

$('#button').on('click', function () {
    $('#status').text('doing some work....');
    somethingThatTakes20Seconds('#status');
});

这里，somethingThatTakes20Seconds将在“做一些工作”声明之前执行。虽然我理解语句本身创建了一个DOM事件，它被放入事件队列并等待堆栈清除执行，但我没有得到的是它是如何做的（在高级别）。 .text方法是否异步，就像setTimeout()一样（只是.text你不接受任何回调，或者是自动生成的回调，基本上是一些更新的代码DOM）？

Answer 1

text()方法不是异步的。 $('#status').text('doing some work....');将在somethingThatTakes20Seconds('#status');之前执行。

您可以定义somethingThatTakes20Seconds()方法来注册回调 - 它在内部向JavaScript引擎添加一个监听器。当听众“听到”某事 - 即。一个AJAX请求完全或用户执行一个动作，它会向消息队列添加一个项目。

这是事件循环的来源。事件循环接受此消息队列项，然后调用与之关联的回调函数。

Answer 2

在函数返回之前，浏览器不会呈现DOM以显示“正在执行某些工作...”消息。假设您的somethingThatTakes20Seconds函数没有返回20秒，您将看不到该消息20秒。你可能想做这样的事情：

$('#button').on('click', function () {
    $('#status').text('doing some work....');
    setTimeout(function () { somethingThatTakes20Seconds('#status'); }, 10);
});

这将允许在开始长时间运行的进程之前呈现DOM。

例如：https://jsfiddle.net/9eq85udz/2/

Answer 3

不，#status方法不是异步的。

JavaScript只按顺序执行每行代码。它不会等到每一行执行完成后才能执行下一行。

在您的代码中，基本上您正在做的是：

将doing some work....文字更改为somethingThatTakes20Seconds()。
运行1st功能。

你的函数不可能在20秒内执行 2nd 函数，然后考虑运行1st函数的速度，运行function addTextOne() { $('#result').append('This is text 1.\n'); } function addTextTwo() { $('#result').append('This is text 2.\n'); } $(function() { $("#testBtn").on('click', function() { setTimeout(addTextOne, 1001); setTimeout(addTextTwo, 1000); }); });函数。

考虑以下示例，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testBtn">
  Test
</button>
<br/>
<textarea id="result" cols='70' rows='30'></textarea>

addTextOne

注意：代码示例基本上在按钮点击addTextTwo之前执行addTextTwo。但是，addTextOne早于(x, y)完成。

这个jQuery代码如何创建一个事件？

3 个答案: