Delayed function execution of setInterval

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

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)

}