admin管理员组文章数量:1026989
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);
}
Share
Improve this question
edited Nov 17, 2024 at 14:39
John Kugelman
363k69 gold badges553 silver badges597 bronze badges
asked Nov 17, 2024 at 14:37
soph.asoph.a
251 silver badge6 bronze badges
3
|
1 Answer
Reset to default 1Reading 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)
}
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);
}
Share
Improve this question
edited Nov 17, 2024 at 14:39
John Kugelman
363k69 gold badges553 silver badges597 bronze badges
asked Nov 17, 2024 at 14:37
soph.asoph.a
251 silver badge6 bronze badges
3
-
What else would you expect if you
setTimeout
and then immediatelyclearTimeout
? Remove theclearTimeout
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 tosetTimeout
. 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
1 Answer
Reset to default 1Reading 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)
}
本文标签: javascriptDelayed function execution of setIntervalStack Overflow
版权声明:本文标题:javascript - Delayed function execution of setInterval - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745630392a2160128.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
setTimeout
and then immediatelyclearTimeout
? Remove theclearTimeout
call to start with. – Marco Bonelli Commented Nov 17, 2024 at 14:43setInterval
at the top of the code right? I would remove that and put it inside the function passed tosetTimeout
. 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