Question

我试图在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>

我想要文字＆＃39;你好＆＃39;单击按钮后立即显示在div内部，之后我想要执行for循环。但是，只有在for循环运行时才会显示文本。

我该如何解决这个问题？

Answer 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

Answer 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);
});

html（）函数完成后如何运行循环？

2 个答案: