函数节流和函数防抖

• 函数节流: 指定时间间隔内只会执行一次任务
• 函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行

例如：输入框输入文字如下：1111111111111111111111...

• 函数节流：当用户持续输入1的过程中，从你开始输入1开始计时，到第1s，执行函数
• 函数防抖：当用户持续输入1的过程中，并不会执行函数，当用户停止输入1s后，执行函数

以下是实现的代码，我忘了引用谁的了……

函数节流

<input>
<script>
  let text = document.querySelector("input")
  function throttle(fn, interval = 1000) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {fn();canRun = true;}, interval);
    };
  }
  text.oninput = throttle(()=>{console.log(text.value)})
</script>

函数防抖

<input>
<script>
  let text = document.querySelector("input")
  function debounce(fn, interval = 1000) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {fn()}, interval);
    };
  }
  text.oninput = debounce(()=>{console.log(text.value)})
</script>