无法停止在setTimeout上运行的功能

Question

我有以下javascript函数，每10秒钟运行一次，以将一些数据与数据库同步。

function sync(){
  latestID = $("#dataDiv tbody tr:first").attr("data-key");
  var url = '<?=$model['fn']?>';
  $.ajax({
    url: url,
    type: 'post',
    dataType: 'json',
    data:{latestID: latestID},
    success: function (result) {
      //Do some stuff
    }
  });
  setTimeout(sync, 10000);
}

选中“ Activate Sync复选框后，此功能开始执行。 但是一旦运行，取消选中该复选框时它不会停止。 以下是我已经尝试执行的所有操作，并且函数将一直执行到页面重新加载为止（默认情况下未选中此复选框）

function checkSync(){
  var doSync;

  if($('#keepChecking').is(':checked')){
    doSync = sync();
    //alert("checked"); return false;
  }else{
    clearTimeout(doSync);
    return false;
    //alert("not checked"); return false;
  }
}

Answer 1

这应该照顾超时和ajax请求：

var ajaxRequest,
    syncTimeout;

function sync(){
  latestID = $("#dataDiv tbody tr:first").attr("data-key");
  var url = '<?=$model['fn']?>';
  ajaxRequest = $.ajax({
    url: url,
    type: 'post',
    dataType: 'json',
    data:{latestID: latestID},
    success: function (result) {
      //Do some stuff
    }
  });
  syncTimeout = setTimeout(sync, 10000);
}

function checkSync(){
  if($('#keepChecking').is(':checked')){
    sync();
    //alert("checked"); return false;
  }else{
    clearTimeout(syncTimeout);
    ajaxRequest.abort();
    return false;
    //alert("not checked"); return false;
  }
}

Answer 2

你不重视doSync到setTimeOut功能和函数内声明的，所以不是全局。

请执行下列操作：

• 声明var doSync; 在您的功能之外进行全局设置。
• 将函数的最后一行编辑为： return setTimeout(sync, 10000);

现在doSync将包含setTimeOut返回的ID值。

工作代码示例：

// Declare the variable globally
var mySync;

function setFunction() {
    // Set mySync to the ID returned by setTimeout (to use clearTimeout)
    mySync = setTimeout(function(){}, 3000);
}

function clearFunction() {
    // Clear timeout with the ID
    clearTimeout(mySync);
}

Answer 3

由于您一直在运行超时，因此您需要使用某种终结器。

您可以执行以下操作：

 // let's grab the html elements const counter = document.getElementById('counter'); const start = document.getElementById('start'); const stop = document.getElementById('stop'); // define a counter let count = 0; // function that runs the payload const runTimer = terminator => { counter.textContent = ++count; // on each run assign the new timeout to the terminator object terminator.timeout = setTimeout(()=> runTimer(terminator), 100); }; // define an object we use to access the most recent timeout const terminator = {}; // when i click start → run the payload start.addEventListener('click', e => runTimer(terminator)); // when i click stop → terminate the last created timeout reference. stop.addEventListener('click', e => clearTimeout(terminator.timeout)); 

 <div id="counter">0</div> <br> <button id="start">start</button> <button id="stop">stop</button> 

好..您不需要为此使用对象，但是也许这使您对如何创建某种数据绑定有了一个想法。

Answer 4

就像freedom-m在问题的评论中所说的那样，如果我在setTimeout（）中调用checkSync函数，它将很好地工作。

setTimeout(checkSync, <?=$model['aud'];?>);

问题是通知setTimeout停止（以调用clearTimeout），这似乎需要定期运行checkSync（），以便我们可以决定是否需要调用clearTimeout。 现在，它检查复选框状态是否每10秒更改一次，以决定是否执行sync（） 。

谢谢大家花时间在此上。