Javascript 了解Geeksforgeks的去盎司代码_Javascript

Javascript 了解Geeksforgeks的去盎司代码

javascript

Javascript 了解Geeksforgeks的去盎司代码,javascript,Javascript,有人能帮我理解这个代码片段将如何工作吗在这里，他们有以下代码片段 <html> <body> <button id="debounce"> Debounce </button> <script> var button = document.getElementById("debounce"); const debounce = (func, delay) => {

有人能帮我理解这个代码片段将如何工作吗

在这里，他们有以下代码片段

<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>

因此，每次单击按钮时，计时器都会被清除，并启动一个新的计时器（可能还会触发新的操作），这听起来可能与我从SFO答案中读到的不一样

另外，是否有人能解释一下

func.apply（context，args），delay）

是如何使用的或是如何逐行编码的

在这里，我看不到任何if条件来检查是否存在挂起的操作

没有显式检查，而是3秒是决定任何事情的最大窗口

引自

黛博斯（1秒）：嗨，我是那个机器人的表弟。只要你不停地打我，我就会保持沉默，因为我喜欢在你上次打我之后的一秒钟后才回复。我不知道是因为我的态度问题还是因为我不喜欢打断别人。换句话说，如果您在上次调用后的1秒钟内一直要求我回复，您将永远不会得到回复。是的，是的，说吧！叫我粗鲁

因此，如果有一个单击操作，并且已经过了3秒，那么您运行事件处理程序函数，简言之，这是一种“背驮”。把你所有的要求都集中起来，然后在你确定不再要求的时候立即尝试

关于第二部分

func.apply（context，args），delay）

-之所以使用delay，是因为javascript中的作用域的性质。在您的示例中，他们没有使用任何与

this

关键字相关的概念，只是在警报后添加了这一行

this.innerText='hello'

，您可能希望按钮的文本更改为“hello”，并且确实可以工作。但是现在用

func（args）

替换

func.apply（context，args）

，它就不起作用了

为什么?？由于

这个

关键字的性质，它是根据调用函数的位置而不是源代码内部的位置来推断的

因此，当3s

setTimeout

之后调用此函数

（）=>func（args）

时，

此

指向

setinterval

，您知道

this.innerText='hello'

对setinterval对象没有任何意义（是的，javascript中的所有内容甚至函数都是对象！）

它允许您操作

这个上下文，该上下文将在调用给定函数时在其内部“解析”；不管您想要的函数位于类、对象还是全局范围内，只要它是可访问的，您就可以将参数和对象传递给它，它将假定为它的this


函数全名（问候语）{
警报（问候语+'，'+this.firstName+“”+this.lastName）；
}
变量person1={
名字：“约翰”，
姓：“Doe”
}
变量person2={
名字：“圣地亚哥”，
姓：“阿丹”
}
全名。呼叫（人1，“你好”）；
全名呼叫（person2，“hola”）const args=arguments
？比如，我们在哪里定义了参数？实际上，哪里都没有。arguments
是javascript中的一个“神奇”词，您可以在任何函数中使用，它将为您提供调用该函数时传递的所有参数（作为数组）。您认为像这样的可变参数函数是如何工作的？你猜对了，它们的定义中没有命名参数，比如函数和（a，b，c）{}
，相反，它们的定义就像函数和（）{}
，它们在主体内部使用参数并在其上循环。

> 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.