html()函数完成后如何运行for循环？ [复制]答案

【问题标题】：How to run for loop after html() function finishes? [duplicate]html()函数完成后如何运行for循环？ [复制]
【发布时间】：2015-12-22 21:59:50
【问题描述】：

我试图在 div 中写入一些文本后运行一些 javascript 代码，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial</title>
    </head>
<body>
    <button type="button" id="btnTest">Click</button>
    <div id="testDiv" style="width:100px; height: 100px; background-color: red;">
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript'>
    $('#btnTest').on('click', function() {
        $('#testDiv').html('hello');

        for(var i=0; i<5000; i++) {
            console.log('testing');
        }
    });
</script>
</html>

我希望在单击按钮后立即在 div 中显示文本“你好”，然后才希望执行 for 循环。但是，文本仅在 for 循环运行时出现。

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以使用.promise()方法：

$('#btnTest').on('click', function() {
    $('#testDiv').html('hello').delay(0).promise().done(function(){
        for (var i = 0; i < 5000; i++) {
            console.log('testing');
        }
    });
});

demo

【讨论】：

这听起来很有希望:)
这对我不起作用。效果还是差不多的。
@FREAKYHUNTER 如果您使用的是 1.6 之前的 jQuery 版本，它将无法工作，promise 是在 v 1.6 中引入的
我已经更新了答案。它现在应该可以工作了。我在 jsfiddle 上添加了一个演示。祝你好运！
@MateiMihai 更新的代码现在可以工作了。谢谢。

【解决方案2】：

HTML 已经放入#testDiv，但由于 Javascript 会阻止浏览器，直到它完成整个代码的执行，所以您看不到那里的文本。

因此，如果您使用setTimeout 函数，那么在浏览器开始执行循环之前，您可以看到文本，因为在执行和下一个循环之间会有足够的时间：

$('#btnTest').on('click', function() {
  $('#testDiv').html('hello');

  setTimeout(function() {
    for(var i = 0; i < 5000; i++) {
      console.log('testing');
    }
  }, 0);
});

【讨论】：

@RejithRKrishnan：怎么没必要？它可以工作，并且没有超时它不会...
@RejithRKrishnan 虽然其他答案比我的要好得多，而且实践也更好，但编写的代码量完全相同（31 个字符）：promise().done(function() {}); 到 setTimeout(function() {},0);
这行得通，谢谢。
@RejithRKrishnan 如您所见，必须编辑另一个答案，因为它不起作用，他不得不输入delay(0)，以一种奇怪且不需要的方式做，什么我已经在这里完成了。
@Buzinas 明白了。我的错。