防抖代码版本 1 和版本 2 执行结果不同的原因是什么？

防抖代码的不同结果剖析

在提供的一段防抖代码中，开发者发现版本 1 和版本 2 执行结果不同，版本 1 防抖失败。

问题根源：递归

关键点在于递归。版本 1 中，if (notCalled &​​& immediate) result = func.apply(context, args); 语句位于递归调用之前，而版本 2 则位于之后。

在版本 1 中，当满足立即执行条件时，执行了 func.apply() 并递归调用自身。问题出在 func.apply() 是同步执行的，它执行了递归调用。由于递归调用仍在继续，notCalled 条件始终为真，导致 func.apply() 被重复执行，这破坏了防抖功能。

而在版本 2 中，if (notCalled &​​& immediate) result = func.apply(context, args); 语句位于递归调用之后。这意味着在条件满足且立即执行时，会执行 func.apply()，并设置超时进行递归调用。此时，notCalled 条件为假，防止 func.apply() 被重复执行，从而实现了正确的防抖功能。

修正版本：

将版本 1 修改为与版本 2 一致，将 if (notCalled &​​& immediate) result = func.apply(context, args); 语句移动到递归调用之后即可解决问题：

function debounce(func, wait, immediate) {
  var timeout

  var debounced = function () {
    var context = this;
    var args = arguments;
    var notCalled = !timeout;

    if (timeout) clearTimeout(timeout);
    if (!immediate) func.apply(context, args);

    timeout = setTimeout(function () {
      if (immediate && notCalled) result = func.apply(context, args);
      timeout = null;
    }, wait);

  };


  return debounced;
}

以上就是防抖代码版本 1 和版本 2 执行结果不同的原因是什么？的详细内容，更多请关注其它相关文章！