Question

我有一个简单的问题。我想对输入框中的某些文本进行API调用。但是，我只想对整个单词进行一次API调用，而不是对键入的每个字母进行一次API调用。

可以通过在按下按钮后调用API来解决此问题，但是我想在setTimeout中使用1秒的延迟，如果用户在前一个字母的1秒内键入一个字母，则setTimeout将被清除并重新启动。 / p>

这是示例代码。

document.getElementById('my_input').addEventListener('input', (e)=>{
    const x = setTimeout(()=>{
      fetch('https://jsonplaceholder.typicode.com/todos/1')
       .then(response => response.json())
       .then(json => {console.log(json)})
    },5000)
})

这将在输入的每个字母之后调用API。我希望创建一个延迟，如果用户再次键入某些内容，它将清除以前的超时，以便在用户停止键入时将整个输入仅调用一次。

不允许按钮。

Answer 1

我建议您将fetch API部分放在其他函数中。您可以声明一个全局变量来分配setTimeout函数并清除计时器：

var fetchDataTimer;

function fetchData() {
    fetchDataTimer = setTimeout(()=>{
        fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => {console.log(json)})
    },5000);
}

document.getElementById('my_input').addEventListener('input', (e)=>{
    clearTimeout(fetchDataTimer);
    fetchData();
});

使用setTimeout延迟的API调用

1 个答案: