文章目录

• • 防抖
  • • 第一类：先延时再执行 【延时可以重新计算】
    • 第二类：先执行后延时 【延时可以重新计算】
  • 节流

防抖

事件发生后，n秒只触发一次，若在n秒内再次触发，则重新计算。

第一类：先延时再执行 【延时可以重新计算】

只要在每次执行事件前，先清除定时器，再开启一个定时器即可

第二类：先执行后延时 【延时可以重新计算】

需要借助一个变量来存储当前的定时器的状态，通过不同的状态，来执行不同的事件

  function handle(fn, delay) {
            var timer = null
            return function() {     //必须形成闭包
                clearTimeout(timer)   //先清空上一次的
                timer = setTimeout(function() {  //必须用函数包裹
                    fn()   
                }, delay)
           }
        }
        document.querySelector("button").onclick = handle(function() {
            console.log("带你寄了")
        }, 2000)

节流

事件发生后，n秒只能触发一次。

先设一个定时器句柄(let time)
只写定时器没有的情况，在里面添加一个定时器,并调用相关事件

当无法使用定时器时，使用时间戳（时间间隔）,同样可以实现类似效果

function setInt(fn, delay) { //fn就是要被截留的函数
    var oldtime = 0

    return function callBack() {  //使用闭包,才能保存上次的时间

        var newtime = Date.now()
        if (newtime - oldtime > delay) {
            fn()
            oldtime = newtime
        }
    }
}
document.onscroll = setInt(function() {  //滚动时触发
    console.log("hello")
}, 200)