I have a function that is repeated every 3 seconds like this:
function myFunction() {
// Do something sexy
var delay = 3000;
setTimeout(function() {
myFunction();
}, delay);
}
It's running inside a Bootstrap modal window and it should only run when that window is open.
I tried wrapping the delay into a something like:
if ($('#modal-task').hasClass('in')){
var delay = 3000;
setTimeout(function() {
myFunction();
}, delay);
}
But the problem is then if the modal is closed and re-opened, the function runs twice and more times each time it's closed and opened.
How do I kill the function completely when the modal is closed/invisible?
this might work, instead of if statement
function something_sexy () {
// Do something sexy
var delay = 3000;
setTimeout(function() {
myFunction();
}, delay);
}
while ($('#modal-task').hasClass('in')) {
something_sexy();
}
When you close the Bootstrap model 'in' will remove from model class. So when close the model clear the timeout It will work.
like.
function myFunction() {
// Do something sexy
console.log("test");
var delay = 3000;
//Assign setTimeout in variable timerval
let timerval = setTimeout(function() {
myFunction();
}, delay);
//when close the model clear the timeout
if (!$('.#modal-task').hasClass("in")){
clearTimeout(timerval );
}
}
Related
I would like to simply set a delay between each click.
Shown below is the script I created. It works fine with clicking each element the way I want it to. The problem is that it clicks each element almost at the same time causing me horrible lag.
Original Code.
var timerVar = setInterval (function() {DoMeEverySecond (); }, 5000); //
<< set to 2 seconds.
function DoMeEverySecond ()
{
(function() {
document.getElementsByName("zTab")[0].click();
document.getElementsByName("zButton")[0].click();
document.getElementsByName("zClose")[0].click();
})();
}
Would it be possible to do something like this.
var timerVar = setInterval (function() {DoMeEverySecond (); }, 5000); //
<< set to 2 seconds.
function DoMeEverySecond ()
{
(function() {
document.getElementsByName("zTab")[0].click();
-----------A DELAY HERE!-----------
document.getElementsByName("zButton")[0].click();
---------- ANOTHER ONE HERE! ----------------
document.getElementsByName("zClose")[0].click();
})();
}
The code is very simple, I tried to explain it as best as I could. Could someone help me out on this piece of code
Here's a live demo of a potential solution. See the inline comments:
// Lets just add some logging here for when the buttons are clicked
document.querySelectorAll('.z-tab').forEach(element => {
element.addEventListener('click', e => console.log('Z Tab'));
});
document.querySelectorAll('.z-button').forEach(element => {
element.addEventListener('click', e => console.log('Z Button'));
});
document.querySelectorAll('.z-close').forEach(element => {
element.addEventListener('click', e => console.log('Z Close'));
});
// Let's take advantage of async/await
async function DoMeEverySecond () {
const elementClassNames = ['.z-tab', '.z-button', '.z-close'];
for (let i = 0; i < elementClassNames.length; i++) {
const element = document.querySelectorAll(elementClassNames[i])[0];
await delayFor(1000); // Let's wait 1000ms between each click
element.click()
}
}
// Delay function that will resolve a promise after the setTimeout delay has been passed.
function delayFor(delay) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, delay);
});
}
DoMeEverySecond ();
<h2>Z Tabs</h2>
<button class="z-tab">1</button> <button class="z-tab">2</button>
<h2>Z Buttons</h2>
<button class="z-button">1</button> <button class="z-button">2</button>
<h2>Z Close</h2>
<button class="z-close">1</button> <button class="z-close">2</button>
Shure you can add delays, but as #Brock Adams mentioned, better use a different approach, like a promise-chain, to be shure all clicks were triggered, before looping again.
I assume a delay of 1 second, you can change this, but be aware, that if you add a delay in total of more that 5 seconds, the click-actins will overlap per interval.
So your code with delays:
function doMeInInterval () {
document.querySelector("[name=zTab]").click();
setTimeout(function() {
document.querySelector("[name=zButton]").click();
setTimeout(function() {
document.querySelector("[name=zClose]").click();
}, 1000);
}, 1000);
}
var timerVar = setInterval(doMeInInterval, 5000);
I have a jQuery ajax where I use setTimeout(). Sometimes, the user triggers the ajax multiple times, before the setTimeout() has kicked off.
So is it possible to clear an active version of the setTimeout() that was triggered previously by adding clearTimeout() like this:
clearTimeout(time);
var time = setTimeout(function() {
$('#hello').fadeOut();
},2600);
Or maybe I need to add some form of global variable?
Depending on what you're doing you may want to act on the first click and ignore subsequent clicks until the first one is finished, or you way want to reset the timer and only act 2.6 seconds after the last click... I gave examples of both, let me know if anything needs clarification..
(function() {
let time, btn = document.getElementById('btn1');
btn.onclick = function() {
if (time) clearTimeout(time);
time = setTimeout(function() {
alert("what the stink?!");
}, 2600);
}
})();
(function() {
let time, btn = document.getElementById('btn2');
btn.onclick = function() {
if (time) return;
time = setTimeout(function() {
alert("what the butts?!");
time = null;
}, 2600);
};
})();
<button id=btn1>Only reacts to last press</button>
<button id=btn2>Only reacts to first press</button>
Here's a quick example which answers your question and illustrates the wonder of closure.
document.getElementById('inputBox').addEventListener('keyup', Delay());
function MyFunction(){
console.log(this.value);
}
function Delay(){
var timer = 0;
return function(){
clearTimeout(timer);
timer = setTimeout(MyFunction.bind(this), 1000);
}
}
https://jsfiddle.net/tlynch001/7y3vnfjn/
I have a setTimeout function already running to make a watch work, but I want to clearTimeout on this already running function when I clock on a button, but only after a few seconds. So ideally, I want a clearTimeout() inside another setTimeout() function, but I can't seem to get it working.
I have this code at the moment:
alarm.click(function() {
water.animate(anim);
setTimeout(function () { clearTimeout(time); }, 3000);
});
var time = setTimeout(function(){ startTime() },1000);
But it does it clears it straight away rather than after 3 seconds. What can I do to make it clear after 3 seconds?
edited my code, still not working :(.
You can try:
var time = setTimeout(function(){startTime(time)},1000);
And in startTime you clear time
function startTime(time) {
cleartTimeout(time);
...
}
You are calling it straight away, but you need a callback.
setTimeout(function () { clearTimeout(time); }, 3000);
function startTime() {
document.getElementById('out').innerHTML += 'starttime<br>';
}
function set() {
document.getElementById('out').innerHTML += 'set<br>';
setTimeout(function () {
document.getElementById('out').innerHTML += 'clear3000<br>';
clearTimeout(time);
}, 3000);
}
var time = setTimeout(function () {
document.getElementById('out').innerHTML += 'clear1000<br>';
startTime();
}, 1000);
set();
<div id="out"></div>
This question already has answers here:
How can I use setInterval and clearInterval?
(5 answers)
Closed 8 years ago.
http://jsfiddle.net/x5MY8/2/
HTML
<div id="easy">easy</div>
<div id="hard">hard</div>
JS
function test(mode) {
var asd = this;
this.mode = mode;
setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
var stuff = new test('easy');
});
$('#hard').on('click', function () {
var stuff = new test('hard');
});
});
Upon pressing the easy button, an event launches that alerts easy every second. If I press hard afterwards, it will start another event, and it will alert easy, hard, easy, hard.., but I want it to alert only what was pressed at the moment, so I have to clear the previous interval somehow. How can I do that? Somehow, I need to call clearInterval when a button is pressed on the other object, but I don't really know how to.
http://jsfiddle.net/x5MY8/3/
You need to store and clear the interval like so
var interval;
function test(mode) {
var asd = this;
this.mode = mode;
if (interval) {
clearInterval(interval);
}
interval = setInterval(function () {
alert(asd.mode);
}, 1000);
}
Store it in a variable:
var interval = setInterval(function(){
//your code
},1000);
Now, you can clear using clearInterval:
clearInterval(interval);
clear the value when every clicked
var clear=0;
function test(mode) {
var asd = this;
this.mode = mode;
clear=setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
clearInterval(clear);
var stuff = new test('easy');
});
$('#hard').on('click', function () {
clearInterval(clear);
var stuff = new test('hard');
});
});
I want to fade out a div if a user hasn't made a mouse click for 20 seconds.
I have the following code:
if($('.main-popup2').is(":visible")){
setTimeout(function() {
$('.main-popup2').fadeOut('fast');
}, 20000);
}
Problem is I don't know how to reset the setTimeout after detecting a user mouse click.
Thanks!
The .setTimeout() method actually returns a reference to the timer it creates. This reference can be used in .clearTimeout to stop the timer before it executes.
Here is an example of how to use this:
var timer;
if($('.main-popup2').is(":visible")){
// create the timer and save its reference
timer = setTimeout(function() {
$('.main-popup2').fadeOut('fast');
}, 20000);
}
// when clicking somewhere on the page, stop the timer
$(document).click(function() {
clearTimeout(timer);
}):
var timeout = null;
var fadeElement = $('.main-popup2');
function fader() {
if(null !== timeout) {
clearTimeout(timeout);
}
fadeElement.stop();
timeout = setTimeout(function () {fadeElement.fadeOut('fast');}, 2000);
}
$(document).click(fader);
fader();
Use delay function.
(window).click(function () {
$('.main-popup2').delay(6000).fadeOut(300);
}
Each click restart 6 seconds, after it .main-popup2 fadeout if there isn't