JavaScript防抖节流的实现写这篇文章主要是因为上一篇文章讲了闭包的由来,限于篇幅就不介绍它的应用了。先说一下防抖和节流的概念,然后分别举个例子。防抖在事件触发后n秒后执行回调。如果在这n秒内再次触发,则重新启动定时器。场景示例要求用户在输入框输入文字3秒后触发查询。如果输入后3秒内有新内容输入,则继续等待三秒。代码示例functiondebounce(fn,delay){lettimeout=null;返回函数(){if(超时){clearTimeout(超时);}timeout=setTimeout(()=>{fn.apply(this,arguments);},delay);}}constquert=function(input){***returnXXX}consthandleInput=debounce(query,3000)然后我们将handleInput绑定到change事件。在其中,该功能只能被触发一次。如果该功能在单位时间内被触发多次,则只会触发一次。稀释事件执行频率。场景示例电话客服很忙,每30分钟才回复客户的问题,其他时间都不处理(当然这都是假设哈哈,如果是这样的话,它是如何工作的)代码示例functionthrottle(fn,delay){letflag=false;返回函数(){如果(标志){返回;}标志=真;setTimeout(()=>{flag=false;fn.apply(this,arguments);},delay);}}constserver=function(query){***returnXXX}consthandleServer=throttle(server,30*60*1000)还有时间戳,防抖和节流大家可以自己查使用一个标志来记录该函数是应该直接忽略还是可以直接触发。而这种认同是通过闭包来实现的。如果没有闭包,则需要一个外部变量来记录。这样做也不是不可以,主要是担心外部变量的污染。(当然闭包的由来并不是为了防止变量被污染,具体可以参考上一篇文章)
