javascript onblur事件阻塞选中input框

最新推荐文章于 2022-06-14 11:01:40 发布

weixin_34247155

最新推荐文章于 2022-06-14 11:01:40 发布

阅读量240

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jsfun/p/6134310.html

版权

先上问题实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="input" οnblur="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" οnblur="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>

转载于:https://www.cnblogs.com/jsfun/p/6134310.html