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>

 

posted on 2016-12-05 16:09  霞光2016  阅读(255)  评论(0)    收藏  举报

导航