Функция остановки цикла setTimeout - PullRequest
Новая
       10

Функция остановки цикла setTimeout

0 голосов
/ 23 сентября 2018

У меня есть цикл с использованием setTimeout, как показано ниже: 

<button onclick="clickStop()">stop</button>

<script type="text/javascript">
    let i = 0;
    let sett;
    function timeOut(counter) {   
        sett = setTimeout(function () {
            $.get("./test3.php", {data_id: counter}, (data) => {
                console.log(data);
                i++;
                timeOut(i);
            });
        }, 1000);
        if(counter >= 10) {
            clearTimeout(sett);
            alert("Done!");
        }
    }
    timeOut(i);
    function clickStop() {
        clearTimeout(sett);
    }
</script>

Но когда я нажимаю кнопку Стоп, она не работает, помогите мне !!

Ответы [ 3 ]

0 голосов
/ 23 сентября 2018

Вы можете очистить тайм-аут, а также установить флаг, который предупредит обратный вызов в $.get, что он не должен вызывать timeOut() при возврате: 

let i = 0;
let sett;
let active = true   // should the loop continue?
function timeOut(counter) {  
    if (counter < 10){
      sett = setTimeout(function () {
        $.get("./test3.php", {data_id: counter}, (data) => {
            console.log(data);
            i++;
            if (active) timeOut(i); // only if active
        });
      }, 1000);
    } else {
      alert("Done!");
    }
}
timeOut(i);
function clickStop() {
    active = false      // stop loop
    clearTimeout(sett); // and clear current timeout
}
0 голосов
/ 23 сентября 2018

timeout(i) внутри обработчика ответа $.get перезапустит цикл, даже если вы остановили его.Вы можете использовать флаг, чтобы получить контроль над ним. 

let i = 0;
let sett;
let status = true;
let url = "http://placekitten.com/200/300";

function timeOut(counter) {   
  sett = setTimeout(function () {
    $.get(url, (data) => {
      console.log(i);
      i++;
      // repeat if status flag is true
      if(status) timeOut(i);
    });
  }, 1000);
  
  if(counter >= 10) {
    clearTimeout(sett);
    status = false; // set status flag to false
    alert("Done!");
  }
}

function clickStop() {
    clearTimeout(sett);
    status = false; // set status flag to false
}

timeOut(i);
<button onclick="clickStop()">stop</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0 голосов
/ 23 сентября 2018

Ваш JS, кажется, работает нормально, см. Ниже, счетчик увеличивается и останавливается, когда я нажимаю кнопку остановки.проблема в $.get("./test3.php" ...

Вы можете уточнить, каков ожидаемый ответ на вызов ajax?

Также, если вы можете описать, что вы пытаетесь сделать, мы можем дать вамнекоторые указатели на лучшие практики, потому что, как сказали те, кто прокомментировал, как правило, не стоит запускать вызовы XHR / ajax в циклах 

<button onclick="clickStop()">stop</button>

<script type="text/javascript">
    let i = 0;
    let sett;
    function timeOut(counter) {   
        sett = setTimeout(function () {
            timeOut(counter+1);
            console.log(counter);
        }, 1000);
        if(counter >= 10) {
            clearTimeout(sett);
            alert("Done!");
        }
    }
    timeOut(i);
    function clickStop() {
        clearTimeout(sett);
    }
</script>
...