javascript - 事件停止重复

Question

我有一个包含以下 HTML 行的网络应用程序:

<select id="dropdown"; onchange="update()">

相关的JS是:

function update()
{
    val = document.getElementById("dropdown").value;
    arr = some_dict[val];
    CHUNK_SIZE = 1024;
    i = 0;

    function recursive_call()
    {
        data = arr.slice(CHUNK_SIZE*i, CHUNK_SIZE*i + CHUNK_SIZE);
        if (data.length < CHUNK_SIZE){return;}
        ...
        $.ajax({
            type: "POST",
            url: "/page",
            data: {"data": data},
            async: true,
            success: function (d){
                setTimeout(another_func, 3000);
                recursive_call();
            }
        })
        i++;
    }

}

本质上，每当选择新的下拉值时，我都会从数组中递归地提取连续的 block 并将它们发送到我的服务器。当数组长度小于 block 大小时，我返回，停止此过程。

问题是当选择新的下拉值并且递归不完整时。我想在选择新值时停止现有的重复循环，并开始重复与新值关联的新数组。

我已经尝试了一些方法，但是代码非常困惑，并且会进一步使我在这里描述的内容变得复杂。

Answer 1

这是使用间隔而不是递归的类似功能的示例。

这样做的好处是您可以使用 clearInterval 取消间隔

let intervalReference = null
let counter = 0

function update() {
   counter = 0
   if(intervalReference !== null){
        clearInterval(intervalReference)
   }
  
  intervalReference = setInterval(()=>{
  	counter++
  	console.log(counter)
        //do your ajax in here
  }, 1000)
}

<select id="dropdown" onchange="update()">
 <option value="a">A</option>
  <option value="b">B</option>
</select>