javascript onblur事件阻塞选中input框
先上问题实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="input" onblur="loop()" name="name" value="onblur"> <input type="input" name="name" value="oninput"> <script type="text/javascript"> var arr =[]; function loop(){ for (var i=0; i<10000000; i++){ var div = document.createElement('div'); arr.push(div); } console.log('end'); } </script> </body> </html>
操作上面页面时,如果先单击onblur输入框,然后移动到oninput框,就会出现明显的延迟选中问题。个人理解如下:
由于浏览器单线程执行js,所以当去选中另外一个input触发了blur事件时,如果blur事件需要完成的时间很长,那么就会出现 input框短暂的选不中的问题,也就是阻塞的情况,解决方案,就是给需要长时间完成的blur函数用setTimeout进行包装,达到先选中 input框,然后异步执行blur中的内容。
最后代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="input" onblur="loop()" name="name" value="onblur"> <input type="input" name="name" value="oninput"> <script type="text/javascript"> var arr =[]; function loop(){ setTimeout(function(){ for (var i=0; i<10000000; i++){ var div = document.createElement('div'); arr.push(div); } console.log('end'); }); } </script> </body> </html>