js---函数节流

最新推荐文章于 2019-10-22 09:35:30 发布

凉城以北夜微凉

最新推荐文章于 2019-10-22 09:35:30 发布

阅读量333

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/hello_mujinhua/article/details/78983137

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

函数节流的目的

从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作，其高频率的更改可能会让浏览器崩溃。又例如，我们常见的一个搜索的功能，我们一般是绑定keyup事件，每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。为了解决这些问题，就可以使用定时器对函数进行节流。

函数节流的原理

某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

例如浏览器窗口大小的改变或者搜索功能的实现

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<script type="text/javascript">
   n=0;
   function resizehandler(){
       console.log(new Date().getTime());
       console.log(++n);
   }
   function throttle(method,delay,duration){
       var timer=null,begin=new Date();
       return function(){
           var context=this,args=arguments,current=new Date();
           clearTimeout(timer);
           if(current-begin>=duration){
               method.apply(context,args);
               begin=current;
           }else{
               timer=setTimeout(function(){
                   method.apply(context,args);
               },delay);
           }
       }
   }
   window.οnresize=throttle(resizehandler,100,200);
</script>
</body>
</html>