Question

我有一个事件处理程序，它（a）需要参数，（b）通过window.setTimeout调用回调函数。我使用bind来附加事件处理程序。

使用其他参数调用被调用函数。我试过了callback(parameters)和`callback.call（ this ，参数）。

以下是代码示例：

var element=document.querySelector('h1');
element.onclick=function(e) {
    delay(test.bind(element,'from original','also from original',e));
}
function test(a,b,c,d,e) {
    alert(this);    //  element
    alert(a);       //  from original
    alert(b);       //  also from original
    alert(c);       //  event
    alert(d);       //  from delayed
    alert(e);       //  also from delayed
}
function delay(callback) {
    window.setTimeout(delayed,100);
    function delayed() {
        //  callback.call(this,'from delayed','also from delayed');
        callback('from delayed','also from delayed');
    }
}

我的测试，我发现回调按以下顺序获取参数：

原始功能的参数
活动本身
来自调用回调的函数的参数

此外，我发现回调函数已将this设置为原始元素，即使我使用.call调用它并将this参数设置为任何值（{{1} }}）。

我可以处理这个问题，但我对这是如何正式处理感到困惑。我在文档中找不到任何与回调讨论事件监听器的内容。

问题是：

记录参数的顺序在哪里？
null来自哪里，为什么它似乎忽略了任何改变的尝试？

由于

Answer 1

正如您所见bind() documentation：

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

所以这一行：test.bind(element,'from original','also from original',e)

将返回一个函数，该函数在被调用时将首先使用那些提供的参数，以及之后的任何后续参数。因此，在调用您的函数时，它将生成您在上面列出的顺序。

对于this，问题是你在绑定后使用setTimeout()，这就是为什么你可能没有得到你期望的。您可以详细了解setTimeout()和this here。

JavaScript：具有回调和参数的事件监听器

1 个答案: