防抖

使用场景:

当一个点击事件多次发送请求的时候用户可能会多次点击造成不必要的内存释放,这个时候我们就可以使用防抖来节省内存消耗。

例子:

比如我们在淘宝界面搜索MacBook
image.png

  1. 当我输入m时,为了更好的用户体验,通常会出现对应的联想内容,这些联想内容通常是保存在服务器的,所以需要一次网络请求,当继续输入ma时,再次发送网络请求,这样会发送7次网络请求,这大大损耗我们整个系统的性能,无论是前端的事件处理,还是对于服务器的压力。
    这就是防抖的操作:只有在某个时间内,没有再次触发某个函数时,才真正的调用这个函数。

代码:

function ZyDebounce(fn, delay) {
// 1.定义一个定时器, 保存上一次的定时器
    let timer=null
// 2.真正执行的函数
    const _debounce = function(...age) {
// 取消上一次的定时器
        clearTimeout(timer)
// 延迟执行
       timer = setTimeout(() => {
  // 外部传入的真正要执行的函数
            fn.apply(this,age)
        }, delay)
       
    }
    return _debounce
}

节流

使用场景:

在一段时间内只需要触发一次的函数就可以使用节流方法。

例子:

很多人都玩过类似于飞机大战的游戏,很多飞机大战的游戏中会有这样的设定,即使按下的频率非常快,子弹也会保持一定的频率来发射,比如1秒钟只能发射一次,即使用户在这1秒钟按下了10次,子弹会保持发射一颗的频率来发射,但是事件是触发了10次的,响应的函数只触发了一次。
image.png

代码:

function __zythrottle(fn, timer) {
    // 1.记录上一次的开始时间
    let lastTimer = 0
     // 2.事件触发时, 真正执行的函数
    const _zythrottle = function () {
  // 2.1.获取当前事件触发时的时间
        const Datanew = new Date().getTime()
 // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = timer - (Datanew - lastTimer)
     
        if (remainTime <= 0) {
            // 2.3.真正触发函数
            fn()
             // 2.4.保留上次触发的时间
            lastTimer = Datanew
        }
    }
    return _zythrottle
}


  

Q.E.D.