A00000到#FFFFFF。

Question

我有一个在点击事件中触发的功能。在函数内部第一行是显示叠加，之后有一个for循环。我希望函数首先显示叠加，然后继续for循环。相反，只有在for循环完成后才会显示覆盖。

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

Answer 1

视图不会在同一个线程或同一个执行流程中更新。它将使用失效技术。这意味着视图更新推迟了一段时间，这就是我们可以在最小的努力中做一堆更新。

javascript是单线程方式，因此视图更新将等到循环结束。

Answer 2

使用for在叠加层与$(document).ready(function(){ $('.addmachinerow').on('click',function(){ var edcname = $('.edc_name option:selected').val(); var machine_description = $("input[name='machine_description'").val(); var capacity = $("input[name='capacity'").val(); var voltage_level = $("input[name='voltage_level'").val(); var powertype = $("select[name='typeofpower'").val(); var edcautovalue = $('.ecaddingspan').attr('data-value'); //if($('#bank_increment').html() == '') $('#bank_increment').html('0'); else $('#bank_increment').html(parseInt($('#bank_increment').html())+1); //if($('#bank_clickededit').html() == '') var bank_increment = $('#bank_increment').html(); else var bank_increment = $('#bank_clickededit').html(); $('.ecaddingspan').clone().appendTo('.edcparent'); //$('.bankname, .bankbranch , .IFSCcode , .bankaccno , .accsincefrom').val(''); var edc_details = {'edcname' : edcname, 'machine_description' : machine_description, 'capacity' : capacity, 'voltage_level' : voltage_level, 'powertype' : powertype } //$('.bank_details_array').append(JSON.stringify(bank_details)+'&&'); }); });循环

之间有延迟

https://jsfiddle.net/b9m5spxu/

Answer 3

这是一篇很好的文章，解释了这种行为（请提示@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中，您可能会注意到div被重绘。并非所有变化都会导致   重绘，可能是因为Opera内部调度。那是因为   用于呈现的事件队列和JavaScript在此不同   浏览器。

在其他浏览器中，重绘被推迟到JavaScript   饰面。

同样，实现可能不同，但通常是节点   被标记为“脏”（想要重新计算并重新绘制），以及   重新排队。或者，浏览器可能只是寻找脏节点   每个脚本并处理它们。

立即重排浏览器包含许多加速优化   渲染和绘画。一般来说，它试图将它们推迟到   脚本已完成，但某些操作需要重新呈现节点   立即

例如：elem.innerHTML ='新内容'警报（elem.offsetHeight）   //＆lt; - 重新渲染elem以获得offsetHeight在上面的例子中，   浏览器必须执行中继以获得高度。但事实并非如此   必须在屏幕上重新绘制元素。

有时其他依赖节点可能会参与计算。   此过程称为reflow，如果可能会占用大量资源   脚本经常导致它。

当然，谈论渲染还有很多。它将被覆盖   通过另一篇文章[todo]。

jquery在执行上一个事件之前等待for循环完成

3 个答案:

A00000到#FFFFFF。