例如写一个sleep()
函数用来延时, 阻塞代码执行, 比如调用下面的代码:
function sleep(millisecond) { var start = new Date(); var end = start.getTime() + millisecond; while(true) { if (new Date().getTime() > end) { break; } } } function generateText() { var i = 0; for (i; i < 10; i++) { (function(){ var n = i; document.body.appendChild(document.createTextNode(n)); sleep(100); })(); } } generateText();
想当然的认为, 上面一段代码, 每 100ms 在中加入一个内容为索引值的文本节点, 但是实际上, 整个内容会在 1s 后一次性全部加载在浏览器中, 达不到想要的每 100ms 加载一次, 为什么会这样呢?
(setTimeout
是将任务加载到队列里, 而不是阻塞程序的执行, 所以达不到想要的效果,setInterval
不能满足想达到的效果)
日经问题……
看这里:当我用js给元素添加className时,浏览器发生了什么?
简单说说你的例子:
JavaScript脚本进程和DOM渲染进程是不一样的
一个页面只拥有一个进程,所以DOM渲染只能等待JavaScript进程运行完毕
你的
sleep
实际上阻塞了JavaScript进程,所以虽然你隔了100ms添加一个节点,但是网页只会在JavaScript运行完毕之后一次性加入。要完成你的要求,只能用异步函数
setTimeout
或者setInterval
。而且实现起来也不难,我不明白为什么你说达不到想要的效果。你果然是想当然...同步、异步、阻塞、非阻塞的概念先弄清楚,js最起码的执行方式得知道吧?js强制阻塞页面会处于未响应的状态。