函数防抖/节流

1. 什么是函数节流(throttle)

概念: 限制一个函数在一定时间内只能执行一次

举个栗子: 做火车或地铁时,过安检的时候,在一定时间内(10秒),只允许一个乘客通过安检口,以配合安检人员完成安检工作.

2.什么是函数节流

前端开发过程中,有一些事件或函数,会被频繁的触发(短时间内多次触发), 例如: onresize, scroll, mousemove, mousehover等, 这些事件的触发频率很高, 不做限制的话,有可能一秒之内执行几十次,几百次,如果这些函数内部执行了其他函数,尤其是执行了操作DOM的函数,不仅会造成计算机资源浪费,还会降低程序运行速度,甚至造成浏览器卡死,崩溃.

同时,重复的ajax调用不仅会造成请求数据的混乱,还会造成网络拥塞,占用服务器带宽,增加服务器压力,显然这个问题也是需要解决的.

3.函数节流如何解决上述问题

主要实现思路: 通过setTimeout定时器,通过设置延迟时间,在第一次调用时,创建定时器,先设定一个变量true,写入需要执行的函数. 第二次执行这个函数时,会判断变量是否true,是则返回. 当第一次的定时器执行完函数最后会设定变量为false. 那么下次判断变量时则为false,函数会依次执行.目的在于在一定时间内,保证多次函数的请求只执行最后一次调用.

4. 代码实现

1.// 时间戳方案functionthrottle(fn,wait){varpre =Date.now();returnfunction(){varcontext =this;varargs =arguments;varnow =Date.now();if( now - pre >= wait){ fn.apply(context,args); pre =Date.now(); } }}functionhandle(){console.log(Math.random());}window.addEventListener("mousemove",throttle(handle,1000));

2.// 定时器方案functionthrottle(fn,wait){vartimer =null;returnfunction(){varcontext =this;varargs =arguments;if(!timer){ timer =setTimeout(function(){ fn.apply(context,args); timer =null; },wait) } }}functionhandle(){console.log(Math.random());}window.addEventListener("mousemove",throttle(handle,1000));

五、函数节流的使用场景

到此为止，相信各位应该对函数节流有了一个比较详细的了解，那函数节流一般用在什么情况之下呢？

懒加载、滚动加载、加载更多或监听滚动条位置；

百度搜索框，搜索联想功能；

防止高频点击提交，防止表单重复提交；