Javascript 为什么这个节流函数中的事件侦听器的行为是这样的？

在我学习的过程中，我遇到了一个我无法解释的事件听者行为。下面是一个简单的节流功能

const btn=document.querySelector（“#throttle”）；
//节流功能
常量throttleFunction=（func，delay）=>{
//以前调用的函数时间
设prev=0；
console.log（prev）；//只调用一次，甚至在单击按钮之前
返回（…args）=>{
//函数的当前调用时间
现在让我们=new Date（）.getTime（）；
//记录以前的
//调用和当前调用计时
console.log（现在是prev，delay）；//但是在单击按钮之前不会调用它
//如果差异大于延迟呼叫
//再次调用该函数。
如果（现在-上一个>延迟）{
上一个=现在；
//“…”是此处的扩展运算符
//使用
//参数数组
返回函数（…参数）；
} 
} 
} 
btn.addEventListener（“单击”），throttleFunction（（）=>{
console.log（“单击按钮”）
}, 1500)); 
单击我
该
.addEventListener（）
方法将对函数的引用作为其第二个参数，单击按钮时可以调用该参数。因此，类似这样的操作将无法将函数添加为单击事件处理程序：

const sayHello=（）=>console.log（“hello”）；
btn.addEventListener（“单击”，sayHello（））；

在上面的JavaScript示例中：

查看对
addEventListener（）的调用


计算其参数，这意味着调用
sayHello（）
函数

2.1
sayHello（）
运行并返回
undefined


使用
“单击”
和
未定义的
调用
addEventListener（）
方法（计算参数）


上面的
sayHello（）
是一个函数调用，因此它将在添加事件侦听器时执行，并在任何单击发生之前执行，导致
sayHello
的返回值用作
addEventListener（）
的第二个参数，因此上述代码的计算结果如下：

const sayHello = () => console.log("hello");
btn.addEventListener("click", undefined);

要正确地将引用传递给事件侦听器，您需要传递一个函数，当单击发生时，JS随后可以调用该函数：

btn.addEventListener("click", sayHello);

记住这一点，添加事件侦听器时将调用
throttleFunction（）
参数，这意味着
throttleFunction
本身不是作为第二个参数传递给
addEventListener（）
，而是返回值。如果将回调提取到
throttleFunction
，这可能会更清楚一些：

const fn = () => {console.log("button is clicked")};
// invoking the function ------------\/ 
const clickHandler = throttleFunction(fn, 1500);
btn.addEventListener("click", clickHandler); // clickHandler is a reference to a function (a non-invoked/called function)

由于正在调用函数，因此从
throttleFunction
返回的函数将用作
addEventListener（）
的参数，而不是throttleFunction本身。返回的函数只有在单击发生时才执行。因此，
let prev=0，但返回的函数会执行多次，因为JS仅在您单击按钮时才会调用它。
addEventListener（）
方法将函数的引用作为其第二个参数，它可以在单击按钮时调用。因此，类似这样的操作将无法将函数添加为单击事件处理程序：

const sayHello=（）=>console.log（“hello”）；
btn.addEventListener（“单击”，sayHello（））；

在上面的JavaScript示例中：

查看对
addEventListener（）的调用


计算其参数，这意味着调用
sayHello（）
函数

2.1
sayHello（）
运行并返回
undefined


使用
“单击”
和
未定义的
调用
addEventListener（）
方法（计算参数）


上面的
sayHello（）
是一个函数调用，因此它将在添加事件侦听器时执行，并在任何单击发生之前执行，导致
sayHello
的返回值用作
addEventListener（）
的第二个参数，因此上述代码的计算结果如下：

const sayHello = () => console.log("hello");
btn.addEventListener("click", undefined);

要正确地将引用传递给事件侦听器，您需要传递一个函数，当单击发生时，JS随后可以调用该函数：

btn.addEventListener("click", sayHello);

记住这一点，添加事件侦听器时将调用
throttleFunction（）
参数，这意味着
throttleFunction
本身不是作为第二个参数传递给
addEventListener（）
，而是返回值。如果将回调提取到
throttleFunction
，这可能会更清楚一些：

const fn = () => {console.log("button is clicked")};
// invoking the function ------------\/ 
const clickHandler = throttleFunction(fn, 1500);
btn.addEventListener("click", clickHandler); // clickHandler is a reference to a function (a non-invoked/called function)

由于正在调用函数，因此从
throttleFunction
返回的函数将用作
addEventListener（）
的参数，而不是throttleFunction本身。返回的函数只有在单击发生时才执行。因此，
let prev=0，但返回的函数会执行多次，因为JS仅在您单击按钮时才会调用它。
，因为
throttleFunction
会立即调用，而它本身会返回第二个函数。这是在事件侦听器上调用的第二个函数。好的，我现在明白了为什么第一次没有调用第二个函数。但是我仍然不明白为什么会立即调用
throttleFunction
，因为您在调用
ad的同一行中调用它