jquery在执行之前的事件之前等待for循环完成

问题描述：

我有一个触发点击事件的函数。函数内部的第一行是显示一个覆盖图，之后有一个for循环。我期望函数先显示叠加层，然后继续使用for循环。只有在for循环完成后才显示覆盖图。jquery在执行之前的事件之前等待for循环完成

$(document).on("click",function(){ 
    $("h1").text("Clicked"); 
    for(var i=0;i<100000;i++){ 
     console.log(i); 
    } 
})

视图不会在同一个线程或相同的执行流程中更新。它将使用无效技术。这意味着视图更新会推迟一段时间，这就是我们可以用最少的努力完成更新的方式。 – subash

答

使用setTimeout()有叠加和for环路之间的延迟

https://jsfiddle.net/b9m5spxu/

@jerry如果是的话更新问题 – Garfield

答

视图不会在同一个线程中执行相同的流程更新。它将使用无效技术。这意味着视图更新会推迟一段时间，这就是我们可以用最少的努力完成更新的方式。

javascript是单线程方式，所以视图更新将等待循环完成。

你有更详细的链接吗？ THKS！ –

对不起哥们，我不是一个好的链接属于html。但是如果你已经看了很多使用失效的actionscript。 ActionScript也基于html/js和oops的混合开发。只是谷歌动作无效，你会得到明确的无效图片 – subash

THK的提示;） –

答

这里是一个很好的文章，解释这种行为（THKS @subash的提示）：http://javascript.info/tutorial/events-and-timing-depth

JavaScript执行和渲染

在大多数浏览器，渲染和JavaScript中使用单一事件队列。它意味着当JavaScript运行时，不会发生渲染。

请在下面的演示中查看它。当您按运行时，浏览器可能暂停一段时间，因为它将div.style.backgroundColor从

A00000更改为#FFFFFF。

在大多数浏览器中，直到脚本结束，或者直到浏览器用一个'脚本运行得太长'的消息来暂停它，你什么也看不到。

Opera是个例外。

<div style="width:200px;height:50px;background-color:#A00000"></div> 

<input type="button" onclick="run()" value="run()"> 

<script> function run() { var div = 
document.getElementsByTagName('div')[0] for(var 
i=0xA00000;i<0xFFFFFF;i++) { 
div.style.backgroundColor = '#'+i.toString(16) } } </script>

在Opera中，你可能会注意到格重绘。并非所有更改都会导致重绘，可能是因为Opera内部调度。这是因为浏览器中渲染和JavaScript的事件队列不同。

在其他浏览器中，repaint被推迟到JavaScript 完成。

再者，实施方式可以是不同的，但一般的节点被标记为“脏”（要被重新计算和重新绘制），并且重绘排队。或者，浏览器可能会在每个脚本之后寻找脏节点并对它们进行处理。

立即回流浏览器包含许多优化以加速渲染和绘画。通常，它会尝试延迟它们直到脚本完成，但有些操作需要立即将节点重新排列为。

例如：elem.innerHTML =“的新内容”警报（elem.offsetHeight） // < - 重新渲染ELEM得到的offsetHeight在上述情况下，在浏览器必须执行relayouting得到高度。但它不不得不在屏幕上重绘elem。

有时其他依赖节点可能会涉及到计算。这个过程被称为重排并且如果脚本经常引起，可能会消耗大量资源。

当然，还有更多要谈论渲染。它将由另一篇文章[todo]覆盖。

jquery在执行之前的事件之前等待for循环完成

A00000更改为#FFFFFF。

相关推荐