如何手写一个防抖和节流函数

最新推荐文章于 2023-03-27 11:55:30 发布

qwer830

最新推荐文章于 2023-03-27 11:55:30 发布

阅读量147

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_68942975/article/details/126755818

版权

防抖

防抖函数结束时触发。就是把多次执行变为最后一次执行，如果一直输入就不会触发

<body>
    <input type="text" id="input1">

    <script src="./debounce.js"></script>
</body>


//首先定义函数，然后传入两个参数，（fn是被防抖的函数，delay是规定的时间）
//这里应用定时器，初始化timer
function debounce(fn,delay=1000){
//timer作为返回值，形成闭包
    timer=null//undefined,0都可以;
    return function(){
      if(timer){
        clearTimeout(timer)
      }
      timer= setTimeout(()=>{
        fn.apply(this,arguments)
        timer=null;
      },delay)
    }
}
input1.addEventListener('keyup',debounce(()=>{
    console.log(input1.value);
}),1000)

节流

节流函数就是间隔时间触发，如果n秒内执行一次，n秒内就触发

<body>
    <div  id="div1" draggable="true"></div>
    <script src="./throttle.js"></script>
</body>

function throttle(fn,delay=100){
    let timer = null
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer= setTimeout(()=>{
            fn.apply(this,arguments)
            timer =null
        },delay)
    }
}
div1.addEventListener('drag',throttle(function(e){
    console.log(e.offsetX,e.offsetY);
},100))