美文网首页
前端开发中必不可少的防抖

前端开发中必不可少的防抖

作者: 杨同学a | 来源:发表于2020-12-21 09:42 被阅读0次

完全适用的防抖

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在,重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}

相关文章

  • 前端开发中必不可少的防抖

    完全适用的防抖

  • 防抖和节流

    防抖和节流 为什么需要防抖和节流 在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、sc...

  • JS函数防抖与节流

    函数节流和防抖在前端开发中应用广泛,例如:函数防抖可以用于对用户输入的自动补全操作、函数节流可以用于对用户浏览行为...

  • 前端开发中的防抖和节流

    防抖和节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM操作 , 资源加载等耗费性能的处理,很可...

  • 前端防抖

    前端防抖

  • lodash的防抖debounce和节流throttle

    防抖debounce ladash-debounce在前端项目开发工作中,我们经常会遇到搜索查询等类似功能,用户在...

  • 前端性能优化-如何快速实现函数防抖和节流?

    文:源码时代 前端性能优化-如何快速实现函数防抖和节流? 在前端开发的过程中,由于有一些用户的行为触发的频率非常的...

  • 防抖与节流

    防抖 在前端开发中,有些事件会持续触发,如scroll,resize事件,如果不停地执行处理函数,则会大大地消耗浏...

  • 搞清楚节流和防抖

    节流(throttle)和防抖(debounce)是前端面试中非常高频的一道面试题,在实际项目开发中,也有很多实用...

  • 说说前端的防抖和节流以及最简单的实现

    防抖和节流在前端是很常见的知识点,并且也是常见的面试题。 00 背景 防抖和节流在前端中是应用很常见的,特别是在 ...

网友评论

      本文标题:前端开发中必不可少的防抖

      本文链接:https://www.haomeiwen.com/subject/fqxrnktx.html