页面上有一按钮如下
该页面对应的js脚本如下
var index = { testClick: function () { index.createBtn(function() { index.sleep(10000); }); }, sleep: function (n) { var start = new Date().getTime(); while (true) { if(new Date().getTime() - start > n) break; } }, createBtn: function (func) { var button = $(''); button.bind("click",function(){ button.remove(); func(); }); $('body').prepend(button); }, };
为什么点击开始按钮再点击测试按钮之后,测试按钮实际上要sleep(是在同步的$.ajax请求上注意到的,这里用循环模拟)之后才移除?把sleep包到setTimeout里才能得到想要的效果……?
这个问题问得确实是有点…… 咋一看以为代码故意sleep了10秒然而题主看不懂,通过上面评论区的撕逼大概知道是在问什么了……
这东东跟浏览器UI线程有关,浏览器是单线程的(这个线程一般就叫浏览器UI线程)。
《高性能JavaScript》第六章 快速响应的用户界面,有这么两段话:
这是点击事件的处理函数,js移除DOM节点后,func()马上接着运行,10秒后进程空闲,才会运行下一个任务,更新用户界面,这时候按钮才会在页面中消失。
上面另一个答案评论区的问题,‘为什么添加的时候就不会有这种现象’
添加的函数是这样的,
这个过程并没有运行func(),试试把这个函数移出来,改成这样
肯定也阻塞
应该是你阻塞了线程 使得图形渲染也'卡'住了
即便button已从dom树中删除。
但是图形没有把新的、不存在button的dom树重新绘制。
之前是我想的简单了,应该是和楼下说的一样,画面渲染卡住了。
比如在func();之前打印一下日志:
出现输出标识之后就卡住了,等到sleep执行完才把完整内容显示出来:
sleep执行时页面被阻塞完全不能操作了,同时CPU占用非常高(因为这个循环理论上没有间隔,)可能是这个导致被卡住了吧。