setTimeout(0)小记
话说这连天在修改原来老前辈留下来的js代码的时候,一不小心就遇到了一个蛋疼的问题,这里我就简单的抽象出一个模拟的栗子来,大概就是下面这个样子:
$("body").append("<textarea rows=6></textarea>"); console.log($("textarea").height());
差不多就是这样吧,so,console的结果是?
是红果果的0呀,有木有!! 后来就找公司大牛给解释一下,这货很淡定的在我的代码上加了这样一句:
setTimeout(function(){ console.log($("textarea").height()); },0);
然后这个高度就毫无节操的跳出来了。。。
难道这个setTImeout(0)不就是立即执行的意思么?
蓝后捏,我就蛋疼的做了个实验:
console.log(1); setTimeout(function(){ console.log(2); },0); console.log(3);
so,结果捏?
嗯嗯,结果是 1 , 3 , 2 。。。。
好吧,这大概就可以解释一些东西了,当我在给body添加一个元素的之后,立刻去取这个元素的高度的时候,这时候js的这个添加的函数还没有完全执行完,虽然DOM中已经有了,但是浏览器也还没有渲染完成,所以这时候的取值是不正确的,而etTimeout之后,取值的操作就会被js放到下一个event loop中去执行,此时的添加和渲染DOM的操作都已经完成了,也就可以得到正确的结果了。。。
百度了一下,发现setTimeout(0)的应用还是挺广泛的,嗯嗯,看来以后要多多注意这些东西了~
嗯嗯,不过以上都是个人看法,如果有哪里理解有偏差的话,还是希望在大牛在留言里及时指出,嗯嗯~
好啦,就先到这吧,话说这几天好热,整个人都化了,木精神~ =.=!
嗯嗯,要是以后还发现其他的用处的话,应该还有后续滚动~ 嗯嗯,就这个样子~