javascript - Delayed function execution of setInterval - Stack Overflow

I'm trying to delay the execution of the setInterval function, which is set at 2000. Ideally, I would like the function to be executed after 10000 at every refresh of the page + after each hide on click function (that makes all the created divs disappear by clicking anywhere on the page and makes the function starts all over again).

Here's how it looks like without any delay:

var list = ["ar1",
            "ar2",
            "ar3",
            "ar4",
            "ar5",
            "ar6",
            "ar7"];

var t = setInterval(createCat, 2000);

function createCat() {
  var cat = $("<div>");
  cat.addClass("ar1");

  var index = Math.floor(Math.random() * list.length);
  var catClass = list[ index ];

  var cat = $("<div>");
  cat.addClass(catClass);

var x = Math.random() * $(window).width();
var y = Math.random() * $(window).height();

cat.css("left",x);
cat.css("top",y);

// by clicking anywhere on the page the function disappears and starts all over again

$("body").click(function() {
  cat.hide();
});

  $("body").append(cat);

}

I tried delaying setInterval with the setTimeout function then clearing it out to make way for the setInterval function but it was unsuccessful and I can't figure out why:

var timeout = setTimeout(function createCat(){

    timeout = setTimeout(createCat, 10000);
}, 10000);

clearTimeout(timeout);

I have also tried the following but it did not work either:

let i = 1;
function createCat(value){
  setTimeout(function(){
    console.log("received value is : ",value)
  },8000);
}

I'm trying to delay the execution of the setInterval function, which is set at 2000. Ideally, I would like the function to be executed after 10000 at every refresh of the page + after each hide on click function (that makes all the created divs disappear by clicking anywhere on the page and makes the function starts all over again).

Here's how it looks like without any delay:

var list = ["ar1",
            "ar2",
            "ar3",
            "ar4",
            "ar5",
            "ar6",
            "ar7"];

var t = setInterval(createCat, 2000);

function createCat() {
  var cat = $("<div>");
  cat.addClass("ar1");

  var index = Math.floor(Math.random() * list.length);
  var catClass = list[ index ];

  var cat = $("<div>");
  cat.addClass(catClass);

var x = Math.random() * $(window).width();
var y = Math.random() * $(window).height();

cat.css("left",x);
cat.css("top",y);

// by clicking anywhere on the page the function disappears and starts all over again

$("body").click(function() {
  cat.hide();
});

  $("body").append(cat);

}

I tried delaying setInterval with the setTimeout function then clearing it out to make way for the setInterval function but it was unsuccessful and I can't figure out why:

var timeout = setTimeout(function createCat(){

    timeout = setTimeout(createCat, 10000);
}, 10000);

clearTimeout(timeout);

I have also tried the following but it did not work either:

let i = 1;
function createCat(value){
  setTimeout(function(){
    console.log("received value is : ",value)
  },8000);
}

• javascript
• settimeout
• setinterval

Share Improve this question Follow edited Nov 17, 2024 at 14:39 John Kugelman 363k6969 gold badges553553 silver badges597597 bronze badges asked Nov 17, 2024 at 14:37 soph.asoph.a 2511 silver badge66 bronze badges 3

• What else would you expect if you setTimeout and then immediately clearTimeout? Remove the clearTimeout call to start with. – Marco Bonelli Commented Nov 17, 2024 at 14:43
• Thank you for your suggestion. I have tried removing clearTimeout but it doesn't do anything; the setInterval function starts immediately without the delay expected with setTimeout. – soph.a Commented Nov 17, 2024 at 15:16
• 1 You still have the setInterval at the top of the code right? I would remove that and put it inside the function passed to setTimeout. Doing this, the initial delay will be 10000, but from there onwards the delay between calls will be 2000. – Marco Bonelli Commented Nov 17, 2024 at 15:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Reading this, I take that you want to set an interval at 2 seconds after onload, to run every 10 seconds.

I believe the confusion here comes from the use of clearTimeout. By clearing the timeout, you are basically telling the browser "Nevermind, don't run that anymore". I think you put that in so that the timeout won't interfere with the interval, which is set... on the same variable. Instead just make it simpler; you don't need to clear the timeout, it just expires itself by executing, and you can trigger the trigger function every time you need to reset

let interval;
function trigger(){

 //This can be run every time all the cats are gone, and is triggered 2 seconds after page is loaded
  clearInterval(interval)
  interval = setInterval(createCat, 10000)
}

window.onload = function(){

setTimeout(trigger, 2000)

}