Delayed function execution of setInterval

Question

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

What else would you expect if you setTimeout and then immediately clearTimeout? Remove the clearTimeout call to start with. — Marco Bonelli
– 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
– soph.a, Commented Nov 17, 2024 at 15:16
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
– Marco Bonelli, Commented Nov 17, 2024 at 15:44

Hermanboxcar · Accepted Answer · 2024-11-17 18:09:53Z

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)

}

answered Nov 17, 2024 at 18:09

Hermanboxcar

5863 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

soph.a Over a year ago

Thank you so much! My goal is to set an interval at 10s after onload, to run every 2s. I followed your recommendation of getting rid of the clearTimeout and switched the intervals and it worked! The only thing i'm still struggling with is to make the function behave the same way as window.onload after removing the created divs (body.onclick). Do you know why the following doesn't seem to be enough? body.onclick = function(){ setTimeout(trigger, 10000) }

Collectives™ on Stack Overflow

Delayed function execution of setInterval

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related