理解极客的代码
有人能帮我理解一下这个代码片段是如何工作的吗？
在希腊人的极客中，他们有下面的代码片段
<html>
<body>
<button id="debounce">
Debounce
</button>
<script>
var button = document.getElementById("debounce");
const debounce = (func, delay) => {
let debounceTimer
return function() {
const context = this
const args = arguments
clearTimeout(debounceTimer)
debounceTimer
= setTimeout(() => func.apply(context, args), delay)
}
}
button.addEventListener('click', debounce(function() {
alert("Hello\nNo matter how many times you" +
"click the debounce button, I get " +
"executed once every 3 seconds!!")
}, 3000));
</script>
</body>
</html> 在下面的节流和拆下函数的区别中，它说，只有在没有挂起的操作(以及在特定的秒之后) 回答时，才会发出
在这里，我看不到任何if条件来检查是否存在挂起的操作。
从那篇文章上他们说
> If the debounce button is clicked only once, the debounce function
> gets called after the delay. However, if the debounce button is
> clicked once, and again clicked prior to the end of the delay, the
> initial delay is cleared and a fresh delay timer is started. The
> clearTimeout function is being used to achieve it.所以每次点击按钮，计时器就会被清除，一个新的计时器被启动(很可能新的动作也会被触发)，这听起来可能跟我从SFO答案中读到的完全不一样。
另外，请有人也解释一下func.apply(context, args), delay)是如何使用的，或者是一行一行的代码？
回答 1
Stack Overflow用户
发布于 2020-11-15 17:25:31
在这里，我看不到任何if条件来检查是否存在挂起的操作。
没有显式的检查，相反，3秒是用来决定任何事情的最大窗口。
摘自https://stackoverflow.com/a/57524083引用的答案
黛比(1秒)：嗨，我是^机器人的表亲。只要你不停地敲击我，我就会保持沉默，因为自从你上次敲击我之后，我只喜欢在一秒后才回复。我不知道，是因为我的态度有问题，还是因为我不喜欢打扰别人。换句话说，如果您在上次调用之后的1秒之前一直向我询问答复，您将永远得不到答复。是的，yeah...go在前面！叫我粗鲁。
因此，如果存在单击操作，并且运行了3s，则运行事件处理程序函数，简而言之，它是某种“备份”。在你所有的要求中加入你的要求，然后当它确定你不会再要求的时候，立即尝试
关于第二部分func.apply(context, args), delay) --这是由于javascript中范围的性质而使用的。在您的示例中，他们没有使用任何与this关键字的概念相关的内容，但是只需在警告后添加这一行this.innerText = 'hello'，您就会期望按钮的文本更改为"hello“，而且它确实会工作。但是现在用func(args)代替func(args)就不行了.
为什么？由于this关键字的性质，它是根据调用函数的位置而不是从它在源代码中的位置来推断的。
因此，当3s setTimeout调用此函数() => func( args)后，this指向setinterval，您知道this.innerText = 'hello'对setInterval对象没有任何意义(是的，所有东西都是javascript中的一个对象，甚至函数！)
应用所做的是，它允许您操作在给定函数调用时将在其内部“解析”的this上下文；无论您想要的函数位于何处--无论是在类、对象还是仅在全局范围内--只要它是可访问的，就可以传递您的参数和它将假定为其this的对象。
function fullName(greeting) {
alert(greeting + ', ' + this.firstName + " " + this.lastName);
}
var person1 = {
firstName: "John",
lastName: "Doe"
}
var person2 = {
firstName: "Santiago",
lastName: "Adan"
}
fullName.call(person1, "hello");
fullName.call(person2, "hola");
https://stackoverflow.com/questions/64845457
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号