函数的防抖与节流

函数防抖

/**
 * debounce:函数防抖
 *  @params
 *    func:要执行的函数
 *    wait:间隔时间
 *    immediate:触发的边界(TRUE==>开始边界)
 *  @return
 *    可被调用的函数
*/
function debounce(func, wait, immediate) {
  let timeout = null,
      result = null
  return function (...args) { 
    let now = immediate && !timeout
    if(timeout)clearTimeout(timeout)
    timeout = setTimeout(() => { 
      if (!immediate) result = func.call(this, ...args)
      timeout = null
    },wait)
    if (now) result = func.call(this, ...args)
    return result
  }
}

函数节流

• 时间戳版本:函数立即执行,间隔wait秒
• 定时器版本:间隔wait秒,函数执行,结束后函数在执行一次
• plus版本:函数立即执行,间隔wait秒,结束后函数在执行一次

/**
 * throttle:函数节流
 *  @version 
 *    时间戳版本
 *  @params
 *    fn:要执行的函数
 *    wait:间隔时间
*/
function throttle(fn, wait) {
  let result = null,
    per = null
  return function (...args) {
    let now = new Date
    if (now - per > wait) {
      result = fn.call(this, ...args)
      per = now
    }
    return result
  }
}

/**
 * throttle:函数节流
 *  @version 
 *    定时器版本
 *  @params
 *    fn:要执行的函数
 *    wait:间隔时间
*/
function throttle(fn, wait) {
  let timerout = null
  return function (...args) {
    if (!timerout) {
      timerout = setTimeout(() => {
        fn.call(this, ...args)
        clearTimeout(timerout)
        timerout = null
      }, wait);
    }
  }
}

/**
 * throttle:函数节流
 *  @version
 *    plus版本
 *  @params
 *    fn:要执行的函数
 *    wait:间隔时间
 *  @return
 *    可被调用的函数
*/
function throttle(fn, wait) {
  let result = null,
    timerout = null,
    pre = null
  return function (...args) {
    let now = new Date
    remaining = wait - (now - pre)
    if (remaining <= 0) {
      pre = now
      clearTimeout(timerout)
      timerout = null
      result = fn.call(this, ...args)
    } else if (!timerout) {
      timerout = setTimeout(() => {
        pre = new Date
        timerout = null
        result = fn.call(this, ...args)
      }, remaining);
    }
    return result
  }
}