setInterval函数延迟执行

Question

我试图延迟 setInterval 函数的执行，该函数设置为 2000。 理想情况下，我希望该函数在每次刷新页面时执行 10000 + 在每次隐藏单击函数之后执行（这使得所有创建的 div 通过单击页面上的任意位置消失，并使该函数重新开始）。

这是没有任何延迟的样子：

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

}

我尝试使用 setTimeout 函数延迟 setInterval 然后将其清除以为 setInterval 函数让路，但它不成功，我不知道为什么：

var timeout = setTimeout(function createCat(){

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

clearTimeout(timeout);

我也尝试过以下方法，但也不起作用：

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

Answer 1

读到这里，我认为您想在加载后设置 2 秒的间隔，每 10 秒运行一次。

我相信这里的混乱来自于clearTimeout的使用。通过清除超时，您基本上是在告诉浏览器“没关系，不要再运行它了”。我认为您将其放入，以便超时不会干扰在同一变量上设置的间隔。相反，只是让它变得更简单：

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)

}