2013年8月

话说这连天在修改原来老前辈留下来的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)的应用还是挺广泛的,嗯嗯,看来以后要多多注意这些东西了~

嗯嗯,不过以上都是个人看法,如果有哪里理解有偏差的话,还是希望在大牛在留言里及时指出,嗯嗯~

好啦,就先到这吧,话说这几天好热,整个人都化了,木精神~ =.=!

嗯嗯,要是以后还发现其他的用处的话,应该还有后续滚动~ 嗯嗯,就这个样子~