vue中，防抖函数怎么写？

Question

vue中，输入框添加防抖，获取全部元素querySelectorAll后，出现报错（防抖函数都是对的）

如果写querySelector，就运行正确，肿么办呀

下面是js代码

var el = document.querySelectorAll('#input')
 el.addEventListener('input', debounce(function (event) {
    console.log(event.target.value)
 }), 1000)

querySelectorAll 改为querySelector，就不报错。应该怎么写才能让所有输入框都能防抖呢？

Answer 1

看起来您正在尝试将事件侦听器添加到 返回的元素集合中document.querySelectorAll()。但是，该querySelectorAll()方法返回一个NodeList没有方法的对象addEventListener()。

要向 中的所有元素添加事件侦听器NodeList，您可以使用for循环遍历元素并将事件侦听器附加到每个元素。以下是如何修改代码以实现此目的的示例：

var els = document.querySelectorAll('#input')
for (const el of els) {
  el.addEventListener('input', debounce(function(event) {
    console.log(event.target.value)
  }), 1000)
}

或者，您可以使用querySelector()方法而不是querySelectorAll()，它返回与给定选择器匹配的第一个元素。在这种情况下，您可以简单地将事件侦听器附加到 返回的元素querySelector()。