防抖代码的不同结果剖析

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

问题根源：递归

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

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

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

而在版本 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;
}