SOURCE

// 模拟使用防抖，一定时间里触发多次，都会重新计算，只执行最后一次触发的处理函数
// send.oninput = debounce(function () {
//     // 一直被打断
//     console.log(this.value)
// }, 1000)


// 模拟使用节流，某秒后才可以再次触发
send.oninput = throttle(function (e) {
    // 等待冷却
    console.log(e)
}, 1000)



/** 
 * 防抖 - 函数
 * 概念：回城打断，要重新计算时间
 * 
 * 核心：清除定时器，来重新计时
 */
function debounce(fn, wait) {
  // 闭包空间，私有变量
  let timerID = 0
  // 返回一函数对象，出去
  return function() {
    // 在一定时间里，触发多次，只执行最后一次
    clearTimeout(timerID)
    // 开启一个定时器，到一定时间就执行处理函数
    timerID = setTimeout(fn.bind(this, ...arguments), wait)
  }
}

/**
 * 节流 beta 1.0 - 函数
 * 
 * 冷却时间，在一定时间后才可以再次使用
 * 
 * 核心：利用定时器
 */

// function throttle(fn, wait) {
//     let flag = null
//     return function () {
//         if (flag) return;
//         flag = setTimeout(() => flag = null, wait)
//         fn.apply(this, arguments)
//     }
// }


/**
 * 节流 beta 2.0 - 函数
 * 冷却时间，在一定时间后才可以再次使用
 * 
 * 核心：利用时间戳
 * 
 * 分析：在一定时间了多次触发，不会触发处理函数，CD 还在冷却中。。
 */
function throttle(fn, CD) {
  let prev = 0
  return function() {
    let curr = Date.now()
    if (curr - prev > CD) {
      fn.apply(this, arguments)
      prev = Date.now()
    }
  }
}

<input type="text" name="" id="send" value="" />

<hr>
    
<h1 align="center" id="content"></h1>