Остановка повторения события - PullRequest
Новая
       11

Остановка повторения события

0 голосов
/ 06 апреля 2020

У меня есть веб-приложение со следующей строкой 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++;
    }

}

По сути, всякий раз, когда новое значение раскрывающегося списка выбрав, я рекурсивно извлекаю последовательные куски из массива и отправляю их на мой сервер. Когда длина массива меньше размера чанка, я возвращаюсь, останавливая этот процесс.

Проблема в том, что выбрано новое раскрывающееся значение и рекурсия не завершена. Я хотел бы остановить существующее повторение l oop, когда выбрано новое значение, и начало повторения для нового массива, связанного с новым значением.

Я пробовал несколько вещей, но код очень грязный и в дальнейшем запутает то, что я здесь описал.

1 Ответ

1 голос
/ 06 апреля 2020

Вот пример аналогичной функциональности с использованием интервалов вместо рекурсии.

Преимущество этого заключается в том, что вы можете отменить интервал с помощью 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>
...