乐趣区

关于javascript:手写Js-防抖节流

防抖: 指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会从新计算函数执行工夫。
应用场景:
1、搜寻框搜寻,只执行最初一次
2、滚动条滚动等事件,实现后执行一次

/*
 * 防抖 - 简易版
 * @param func {function} 回调函数
 * @param wait {number} 毫秒数
 */
function debounce(func, wait) {
  let timeout
  return function() {
    const context = this
 const args = arguments
    if (timeout) {clearTimeout(timeout)
    }
    timeout = setTimeout(() => {func.apply(context, args)
    }, wait)
  }
}
/**
 * 防抖 - 立刻执行版 * @param func {function} 回调函数
 * @param wait {number} 毫秒数
 * @param immediate {boolean} 是否先执行一次
 */
function debounce(func, wait, immediate) {
  let timeout
  return function() {
    const context = this
 const args = arguments
    if (timeout) {clearTimeout(timeout)
    }
    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(() => {timeout = null}, wait)
      // 第一次 timeout 为 undefined,先执行函数
 if (callNow) {func.apply(context, args)
      }
    } else {timeout = setTimeout(() => {func.apply(context, args)
      }, wait)
    }
  }
}
/**
 * 防抖 - 立刻执行 - 返回值 * @param func {function} 回调函数
 * @param wait {number} 毫秒数
 * @param immediate {boolean} 是否先执行一次
 */
function debounce(func, wait, immediate) {
  let timeout, result
  return function() {
    const context = this
 const args = arguments
    if (timeout) {clearTimeout(timeout)
    }
    if (immediate) {
      const callNow = !timeout
      timeout = setTimeout(() => {timeout = null}, wait)
      // 第一次 timeout 为 undefined,先执行函数
 if (callNow) {func.apply(context, args)
      }
    } else {timeout = setTimeout(() => {result = func.apply(context, args)
      }, wait)
    }
    return result
  }
}

节流: 指间断触发事件然而在 n 秒中只执行一次函数。
应用场景:
1、上拉加载和下拉刷新,或者鼠标挪动等事件

/**
 * 节流 * @param func {function} 回调函数
 * @param wait {number} 毫秒数
 */
 function throttle(func, wait) {
  let previous = 0
 return function () {let now = Date.now()
    const context = this
 const args = arguments
    if (now - previous > wait) {func.apply(context, args)
      previous = now
    }
  }
}
退出移动版