移动端事件（六）—— 函数防抖和函数节流的封装在上一篇理解了函数防抖和函数节流各两种思路，接下来我们就可以根据这两个思路

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

在上一篇理解了函数防抖和函数节流各两种思路，接下来我们就可以根据这两个思路将函数防抖和函数节流封装起来。由参数决定高频间隔的时间，以及是否在头部执行。我们现在就来将他们封装起来，提高代码复用性。

函数防抖封装：调用debounce 函数，返回一个处理过防抖的函数

　　cb 要处理防抖的函数
　　time 默认的高频间隔时间
　　isStart 是否在头部执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 400px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div>    
<script>

function debounce(cb,delay = 200,isStart = false){
    let timer = 0;
    let isFirst = true; //是否是第一次执行
    return function(...arg){
        clearTimeout(timer);
        if(isFirst&&isStart){
            cb.apply(this,arg);
            isFirst = false;
        }
        timer = setTimeout(()=>{
            (!isStart)&&cb.apply(this,arg);
            isFirst = true;
        },delay)
    }
}

box.onmousemove = debounce((e)=>{
    console.log(1);
},200,true);
</script>    
</body>
</html>

函数节流封装的参数也是一样:

　　cb 要处理防抖的函数
　　time 默认的高频间隔时间
　　isStart 是否在头部执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 400px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div>    
<script>
function throttle(cb,interval=200,isStart=false){
    let timer = 0;
    return function(...arg){
        if(timer){
            return ;
        }
        isStart&&cb.apply(this,arg);
        timer = setTimeout(()=>{
            (!isStart)&&cb.apply(this,arg);
            timer = 0;
        },interval)
    }
}
box.onmousemove = throttle(function(e){
    console.log(1,e,this);
},500)   
</script>    
</body>
</html>

以上的封装都是可以直接使用的，有兴趣的看上一篇文章了解函数防抖与函数节流的思路会更好。

最后

总结一下他们之间的相同点和不同点

相同点

都是可以通过 setTimeout 实现我们的目的防抖和节流都能，降低回调执行频率，节省资源

不同点

函数防抖，在一段连续操作结束后，只在最前或最后执行一次，关注在操作上。

函数节流，在一段连续操作中，每一段时间只执行一次，关注在时间上。