深入浅出js函数防抖与节流

Posted 2022-05-21 欧阳呀

函数防抖概念简述

当持续触发事件时，一段时间内只能触发一次。将几次操作合并为一此操作进行。比如说有一条赛车通道，赛车通过的时间为5s，5s之后到达终点，执行领奖操作。

这5s之内只允许一辆赛车在通道内，如果第一辆赛车还在通道内，此时第二辆赛车已经进来了，那么销毁第一辆赛车，从第二辆车入场重新计时5s执行领奖操作。

经典应用场景

<input placeholder="请输入电话" type="number"/>

此input框需要进行一个即时查询，所以需要实时监听用户在input输入的值。拿到值后发送请求给后台，返回数据进行电话匹配。

通常的写法

 	let telInput = document.querySelector('input');
    telInput.addEventListener('input', function(e) 
            //如果直接每次发请求，会导致性能问题
            //数据请求
            $.ajax()
    )

此时存在的问题是，如果这个过程中不断的发送请求，当请求过多、数据量过大时，浏览器很容易卡死或者崩溃，服务器也处理不过来。
此时就要进行函数防抖的处理，如下:

let telInput = document.querySelector('input');
    telInput.addEventListener('input', function(e) 
            //如果直接每次发请求，会导致性能问题
            //数据请求
            let timeOut = null;
            if(timeOut)
				clearTimeout(timeOut)
			else
				timeOut = setTimeout(()=>
				  $.ajax()
			   ,2000)
			
    )

此时，当监听到用户输入时，就会进行判断，如果用户输入第一个字符与第二个字符的时间间隔小于2s，那么从第二个字符开始重新计时。当用户停下来了，2s过后请求数据。

当然，我们还可以封装一下，如下:

//fn(方法),wait(等待时间) 都是参数 调用传进来就可
function antiShake(fn, wait) 
        let timeOut = null;
        return args => 
            if (timeOut) clearTimeout(timeOut) 
                timeOut = setTimeout(fn, wait);
        
    

调用

let telInput = document.querySelector('input');
//数据请求方法
function demo()
	$.ajax()

telInput.addEventListener('input',antiShake(demo,2000));

函数节流概念简述

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流，顾名思义，节制流入或流出。比如说水龙头放水，一旦打开开关，水流就会很快，我们要做的就是限制流出。

经典应用场景

移动端touch事件

<div class="box"></div>
<script>
let box= document.querySelector('.box');
box.addEventListener("touchmove", function (e)
        //do something
        //ajax()
        //...
)
</script>

如果直接用以上的写法，touchmove里的方法或事件，会一直执行，只要手指发生了移动，就会执行。

即使手指移出了 原来的target 元素，但是touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。
touchmove事件会多次重复触发，由于移动端计算资源宝贵，尽量保证事件节流。

那么，思路是怎么样的呢？

把整个事件处理器比喻成客运站，如果客运大巴到站就走，那么路上肯定会发生交通拥堵，而且车大部分是空的，因为没给时间上客，虚假繁忙的情况肯定是不好的，那么怎么处理呢？

设置一个时间间隔，时间间隔内只允许执行一次，客运站大巴设定一个时间，到点才会走。

	let time = null;
    box.addEventListener("touchmove", function (e)
        if(!time)
            time = setTimeout(()=>
                //do something
		        //ajax()
		        //...
                time = null;
            ,1000)
        
    )

同样的，为了方便，可以封装一下

function throttle(event, time) 
        let timer = null
        //timer状态要常驻内存，这里做了一个闭包
        return function() 
            if (!timer) 
                timer = setTimeout(() => 
                    event();
                    timer = null
                , time)
            
        
    

调用

function demo()
	 //do something
     //ajax()
     //...

box.addEventListener("touchmove",throttle(demo,2000));

当然，还有第二种办法，通过时间戳

let throttle = function(func, delay)             
　　let prev = Date.now();            
　　return function()                 
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay)                     
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　            
　　        
        
function demo()             
　　//do something
    //ajax()
    //...      
        
box.addEventListener('touchmove', throttle(demo, 2000));

FAQ

大家很容易混淆函数防抖与节流的概念，一句话总结:

节流是把一定时间内的多个事件合为一个
防抖是固定的时间内，事件只允许发生一次

讲的很详细了，如对大家有帮助，欢迎评论转发。如果有错误，敬请指正。
此篇为原创博文，转载请注明出处。