如何在我的 function 中嵌套 setInterval 和 setTimeout？

Question

早上好，

我有一個 javascript function，它又調用了幾個函數。 我想在調用 javascript function 后半秒觸發 function（在我的示例中為 check1），隨后每 10 秒（10000 毫秒）調用相同的 function check1。 做了一些研究后，我發現——雖然我可能是錯的——setInterval 和 setTimeout 的組合會達成協議。

不幸的是，結果並不如預期。

之后，我使用 clearInterval() 進行了第二次嘗試，但我也不確定如何嵌套這些不同的函數。

有沒有一種優雅而聰明的方法來實現這一目標？ 非常感謝您的幫助

下面是我的 javascript 代碼：

// Global variables
var AutoScript = false;
var IntervalRefresh1 = 500;
var newIntervalDefined1 = false;

// calls the startUp method
startUp();


function startUp()
{
  console.log("I'm the startup2");
  setInterval(check1, IntervalRefresh1);
}


function check1()
{
  $.ajax({
  type: 'POST',
  url: 'php/checker1.php',
  dataType: 'json',
  data: {
  counter:$('#message-list').data('counter')
  }
  }).done(function( response ) {
  /* check if with response we got a new update */
  if(response.update==true)
  {
    var j = response.news;      
    $('#message-list').html(response.news);
    AutoScript = true;
    // here I call a specific method named after getDataFromDatabase(j);
    AutoScript = false;        
    if (newIntervalDefined1 == false)
    {
      setTimeout(check1, 10000);
      newIntervalDefined1 == true;
    }
  }
  });
}

Answer 1

永遠不要將 setInterval 與 async/ajax 一起使用

只需使用 setTimeout

或移動

setTimeout(check1, 10000);

給你特別的 function

// Global variables
var AutoScript = false;

function check1() {
  $.ajax({
    type: 'POST',
    url: 'php/checker1.php',
    dataType: 'json',
    data: {
      counter: $('#message-list').data('counter')
    }
  }).done(function(response) {
    /* check if with response we got a new update */
    if (response.update == true) {
      var j = response.news;
      $('#message-list').html(response.news);
      AutoScript = true;
      // here I call a specific method named after getDataFromDatabase(j);
      AutoScript = false;
      setTimeout(check1, 10000);
    }
  });
}
$(function() {
  check1()
})

Answer 2

問題是你在一個時間間隔內調用check1但沒有清除它。 所以這將繼續每500毫秒被調用一次。

setInterval(check1, IntervalRefresh1);

在頂部，您使用setTimeout再次調用 function。 你也必須根據條件在某個時候清除它，這樣它就不會無限運行。 查看代碼和注釋。

var timerinterval;
var timeout;
function startUp()
{
  console.log("I'm the startup2");
  timerinterval = window.setInterval(check1, IntervalRefresh1); //set a timerInterval
}


function check1()
{
  $.ajax({
  type: 'POST',
  url: 'php/checker1.php',
  dataType: 'json',
  data: {
  counter:$('#message-list').data('counter')
  }
  }).done(function( response ) {
  /* check if with response we got a new update */
  if(response.update==true)
  {
    var j = response.news;      
    $('#message-list').html(response.news);
    AutoScript = true;
    // here I call a specific method named after getDataFromDatabase(j);
    AutoScript = false;        
    if (newIntervalDefined1 == false)
    {
      clearInterval(timerinterval); //clear the interval timer
     timeout =  setTimeout(check1, 10000); //now clear this too at some point of time so that it doesn run infinitely
      newIntervalDefined1 == true;
    }
  }
  });

Answer 3

早上好，

我有一個 javascript function ，它又調用了幾個函數。 I would like to trigger the function (check1 in my example below) half a second after the javascript function is called and subsequently call the same function check1 every 10 seconds (10000 milliseconds). 做了一些研究后，我發現——雖然我可能錯了—— setInterval 和 setTimeout 的組合會達成交易。

不幸的是，結果並不像預期的那樣。

之后，我使用 clearInterval() 進行了第二次嘗試，但我不確定如何嵌套這些不同的函數。

有沒有一種優雅而聰明的方法來實現這一目標？ 非常感謝您的幫助

下面是我的 javascript 代碼：

// Global variables
var AutoScript = false;
var IntervalRefresh1 = 500;
var newIntervalDefined1 = false;

// calls the startUp method
startUp();


function startUp()
{
  console.log("I'm the startup2");
  setInterval(check1, IntervalRefresh1);
}


function check1()
{
  $.ajax({
  type: 'POST',
  url: 'php/checker1.php',
  dataType: 'json',
  data: {
  counter:$('#message-list').data('counter')
  }
  }).done(function( response ) {
  /* check if with response we got a new update */
  if(response.update==true)
  {
    var j = response.news;      
    $('#message-list').html(response.news);
    AutoScript = true;
    // here I call a specific method named after getDataFromDatabase(j);
    AutoScript = false;        
    if (newIntervalDefined1 == false)
    {
      setTimeout(check1, 10000);
      newIntervalDefined1 == true;
    }
  }
  });
}