day117-手写简单防抖

前言

其实就是一个apply调用。非常简单。重点是理解防抖和节流这两个概念吧。
首次事件发生之后,需要延迟(wait)时间处理。
延迟时间段内有第二次事件,则以第二次事件为准延迟处理
知道最后一次时间段内没有事件,则执行最后一次。

代码

  • debounce

    function debounce (fn, wait, immediate) {
    let timer
    return function () {
    // 注意arguments是当前函数内的参数
    if (immediate) { fn.apply(this, arguments) }
    if (timer) { clearTimeout(timer) }
    timer = setTimeout(() => {
    fn.apply(this, arguments)
    }, wait)
    }
    }
  • throttle

    function throttle (fn, wait) {
    let prev = new Date()
    return function () {
    const now = new Date()
    // 在wait时间内只执行一次
    if (now - prev > wait) {
    // 注意arguments是当前函数内的参数
    fn.apply(this, arguments)
    prev = new Date()
    }
    }
    }

总结就是:throttle限制函数调用频率,debounce则限制函数调用速率

文章作者: lmislm
文章链接: http://lmislm.com/2019/05/09/2019-05-09/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog