移动端事件（五）—— 函数防抖和函数节流的封装

最新推荐文章于 2023-04-19 17:34:17 发布

白菜new

最新推荐文章于 2023-04-19 17:34:17 发布

阅读量184

点赞数 2

分类专栏：移动端文章标签： js 封装 javascript

本文链接：https://blog.csdn.net/qq_43850819/article/details/105399685

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

移动端事件（五）—— 函数防抖和函数节流的封装

我们了解了函数防抖与函数节流的思路后，我们现在来将他们封装起来，提高代码复用性。

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

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

<!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>

函数节流封装:

<!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>