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

Question

Good Morning,

I have a javascript function which, in turn, calls several functions. 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). Having done some researches, I found out - I might be wrong though - that the combination of setInterval and setTimeout would have made the deal.

Unfortunately, the outcome was not as expected.

Afterwards, I made a second trial by using the clearInterval() but I was not sure either how to nest these various functions.

Is there an elegant and smart way to achieve this? Many thanks in advance for your help

Here below is my javascript code:

// 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

Never use setInterval with async/ajax

Just use the setTimeout

OR move

setTimeout(check1, 10000);

to your special 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

The problem is you're calling check1 in an interval but not clearing it. So this will keep getting called every 500 miliseconds.

setInterval(check1, IntervalRefresh1);

On the top, you're calling the function again with setTimeout . You must clear that too at some point based on a condition so that it doesn't run infinitely. See the code and comments.

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

Good Morning,

I have a javascript function which, in turn, calls several functions. 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). Having done some researches, I found out - I might be wrong though - that the combination of setInterval and setTimeout would have made the deal.

Unfortunately, the outcome was not as expected.

Afterwards, I made a second trial by using the clearInterval() but I was not sure either how to nest these various functions.

Is there an elegant and smart way to achieve this? Many thanks in advance for your help

Here below is my javascript code:

// 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;
    }
  }
  });
}