// fn是我們需要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
  // last為上一次觸發回調的時間
  let last = 0

  // 將throttle處理結果當作函數返回
  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments
    // 記錄本次觸發回調的時間
    let now = +new Date()

    // 判斷上次觸發的時間和本次觸發的時間差是否小于時間間隔的閾值
    if (now - last >= interval) {
      // 如果時間間隔大于我們設定的時間間隔閾值，則執行回調
      last = now;
      fn.apply(context, args);
    }
  }
}

// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發了滾動事件'), 1000)

function debounce(fn, delay) {
  // 定時器
  let timer = null

  // 將debounce處理結果當作函數返回
  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments

    // 每次事件被觸發時，都去清除之前的舊定時器
    if (timer) {
      clearTimeout(timer)
    }
    // 設立新定時器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce來包裝scroll的回調
const better_scroll = debounce(() => console.log('觸發了滾動事件'), 1000)

// fn是我們需要包裝的事件回調, delay是時間間隔的閾值
function debounce_optimize(fn, delay) {
  // last為上一次觸發回調的時間, timer是定時器
  let last = 0, timer = null
  // 將throttle處理結果當作函數返回

  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments
    // 記錄本次觸發回調的時間
    let now = +new Date()

    // 判斷上次觸發的時間和本次觸發的時間差是否小于時間間隔的閾值
    if (now - last < delay) {
      // 如果時間間隔小于我們設定的時間間隔閾值，則為本次觸發操作設立一個新的定時器
      clearTimeout(timer)
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, delay)
    } else {
      // 如果時間間隔超出了我們設定的時間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應
      last = now
      fn.apply(context, args)
    }
  }
}

// 用新的throttle包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發了滾動事件'), 1000)