setTimeout的行为与传递的函数参数有所不同

Question

我对搜索字段有一个简单的限制,以确保不是每个按键都作为查询发送,它在提交之前等待按键后300ms.如果在300ms启动之前检测到另一个按键,则时钟将复位.

我在Vue中设置如下:

<input v-model="search_string" placeholder="Search..." type="text" @keyup="searchThrottle();">

runSearch (type) {
    do something....
}

searchThrottle () {
    if (window.ajaxtimeout) clearTimeout(window.ajaxtimeout)

    window.ajaxtimeout = setTimeout(this.runSearch, 300)
},

它依赖于这条线的方式有所不同: window.ajaxtimeout = setTimeout(this.runSearch, 300)

例如,如果我传递一个参数,那么该行就是window.ajaxtimeout = setTimeout(this.runSearch('autocomplete'), 300)为每个按键运行搜索,忽略超时.

为什么功能不同？

Answer 1

如果你this.runSearch('autocomplete')在你的位置setTimeout,该runSearch功能将立即执行,而不是在预期之后执行 300ms.

因此,您可以将runSearch函数的参数添加到setTimeout初始化:

setTimeout(this.runSearch, 300, 'autocomplete');

或者你可以使用一个闭包,但需要存储this之前:

var self = this;
setTimeout(function {
    self.runSearch('autocomplete');
}, 300);

正如@JaromandaX在评论中提到的那样,你可以用ECMAScript 6做同样的事情:

setTimeout(() => this.runSearch('autocomplete'), 300); 

还有另一种方法,.bind()用于创建函数引用,将函数this和其他参数传递给runSearch函数.这也很有效,但这对我来说有点不好看.由于维护和可读性,我个人不喜欢那个apraoch.但是为了得到最完整的答案,我也添加了这个例子(第一篇帖子来自@BrotherWoodrow关于此):

setTimeout(this.runSearch.bind(this, 'autocomplete'), 300);

有关MDN上setTimeout的更多信息.