这是一段防抖代码,为什么会出现不同的结果?-灵析社区

代码日记

[debounce-version1](https://link.segmentfault.com/?enc=5M4djQn6RXb97dn5%2FIuSsg%3D%3D.M4IlNX7pUgrfVff4Fyn6tiHAcLHsW1lunvGhImsFK0hElPT8VqDDHU8lYs8DbmtFG8coFyIt9FDu%2BPtPWyqctw%3D%3D) [debounce-version2](https://link.segmentfault.com/?enc=H7bAur3zI9mr1Gy3yNsiaA%3D%3D.56UgzDeQ8o19EOVC95PM8kK68vn3zxLJZinmVNEXBWtkm2TQkd1DSp04CJ5ZeBZ52w0mTGJF44Y%2B%2FkLmrmlsog%3D%3D) version1 跟 version2的区别是移动了` if (notCalled && immediate) result = func.apply(context, args);` 的位置 我的预期是这两个代码应该执行结果是一致的,都返回1 但是version1 没有防抖成功 function debounce(func, wait, immediate) { var timeout var debounced = function () { var context = this; var args = arguments; var notCalled = !timeout; if (timeout) clearTimeout(timeout); if (notCalled && immediate) result = func.apply(context, args); timeout = setTimeout(function () { if (!immediate) func.apply(context, args); timeout = null; }, wait); }; return debounced; } var counter = 0; var debouncedIncr = debounce( function () { counter++; if (counter < 10) debouncedIncr(); }, 32, true, ); debouncedIncr(); console.log(counter, 1, "incr was called immediately"); setTimeout(function () { console.log(counter, 1, "incr was debounced"); }, 96);

阅读量:296

点赞量:16

问AI
问题出在递归上。如果你那个不是递归的话,其实是防抖了的。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/163d2ead138901ba75834ba2645c92bd.png) 注意看上面红圈处的 "func.apply(context, args)",这是个同步方法 ,它执行的是什么?执行的你下面红圈处的递归,也就是又调用了一遍自身,又从头走了一遍箭头处的判断。 而此时下面黄圈处那句 "timeout = setTimeout(...)" 根本还没开始执行呢,所以 "notCalled" 始终成立,自然 "func.apply(context, args)" 会执行多次。