setInterval after setTimeout - javascript

var playtop = setInterval(goright, 5000);
function goright(){
...
}
The above works.
Now, I need to interrupt the above by clicking on a button, do something on page, and ten seconds after click - activate the setInterval again.
$("#btngoright").click(function(){
clearInterval(playtop);
...
setTimeout(playtop, 10000);
});
But, once interrupted, setInterval is not activated again.

It's not working because playtop is the id that was returned when initially setting the interval.
The setTimeout method expects a function, not an id, therefore you should pass a reference to the goright function again:
setTimeout(goright, 10000);
If you want to activate the interval again after 10 seconds, you can set an interval and pass a reference to the goright function in an anonymous function:
$("#btngoright").click(function(){
clearInterval(playtop);
setTimeout(function () {
setInterval(goright, 5000);
}, 10000);
});

Nearly. It should be:
$("#btngoright").click(function(){
clearInterval(playtop);
setTimeout(function () {
playtop = setInterval(goright, 5000);
}, 10000);
});
This way you are putting control back into the playtop variable meaning that the interrupt function will work more than once.

Related

Set interval works only first time. Is there any solution?

I want to run the function continuously. But it only works first time properly. Is there any solution for working this function continuously?
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
}, 15000);
});
If the code inside the setInterval takes longer than the time you have set it will create another process before the function finishes messing everything up. So choosing setTimeout is actually better.
To make a function loops in setTimeout use a following syntax:
function function1() {
// something here
}
function runner() {
function1();
setTimeout(function() {
runner();
}, time);
}
runner();
Given the comment under the question explaining your goal:
I want to trigger a button to show a div after 15 secs when the page is loaded, and 50 secs later another trigger for closing the div. & I want to run this continuously
I would suggest that you chain setTimeout() calls instead of using setInterval() which will cause the events to overlap and become a mess. I'd also suggest that you call show() and hide() directly on the required elements instead of faking click events in the DOM. Try this:
function openBand() {
$('#yourElement').show();
setTimeout(closeBand, 50000);
}
function closeBand() {
$('#yourElement').hide();
setTimeout(openBand, 15000);
}
$(document).ready(function() {
setTimeout(openBand, 15000);
// or just call closeBand() here directly, if the element starts as hidden
});
You should change your current function with this one
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
}, 15000);
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
});

Do function with timeout while togglebutton is pressed

I want to run a function with a timeout of 2000 ms. The function should just run while toggleButton is pressed.
When I run this function my CPU explodes:
do {
setTimeout(function () {
me.pushMockData();
}, 2000);
}
while (liveButton.getPressed() != false);
Your CPU explode because you create Timeout again, again and again really fast in your loop when button is pressed. If you want to run your function every 2 second :
You should test if the the button is pressed.
Use setInterval
Inside setInterval, check if the button is still pressed, if not, clearInterval
https://www.w3schools.com/jsref/met_win_setinterval.asp
If you just want to active your function 2 second later, use setTimeout inside if.
You are going about this all wrong, keep things simple and attach an event listener to the button and call setTimeout then.
HTML
<button id="my_button">Click Me</button>
JavaScript
document.getElementById('my_button').addEventListener('click', function () {
setTimeout(function () {
alert('Clicked!');
}, 2000);
});
JSFiddle
Live Example
It's because you are constantly calling the setTimeout function in the while loop.
var timeout;
if (liveButton.getPressed())
{
if (typeof timeout !== 'undefined') {
timeout = setTimeout(function () {
me.pushMockData();
}, 2000);
} else {
clearTimeout(timeout);
}
}
If you can catch the onPress and onRelease event, it would be better if you do following
onPress
var myTimeout = setTimeout( ... , 2000 )
onRelease
clearTimeout(myTimeout)
example: https://jsfiddle.net/jfefL4oo/1/

jquery keyup delay is being ignored

Ok perhaps someone could enlighten me as to what I am missing here guys. I have a text box which updates a jquery data table with ajax call based on user input. Obviously the desire is to only fire the ajax call when the user has finished typing.
However no matter what snippets I try from SO and elsewhere the timeout is ignored and the ajax fire immediately. I wonder if anyone might point me in the right direction.
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(alert("test"), 3000);
});
You have to pass a function to the timeout function as the first parameter. Now you're passing the result of the alert("test") call.
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(function(){ alert("test"); }, 3000);
});
This should work.
try this setTimeout( 'you need to pass function here', 300 )
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(hello, 3000);
});
function hello(){
alert("test");
}

How to reset a setTimeout function in a button so it can run again

There is a button that its function runs couple of setTimeout functions that they all run one by one. so I want to reset the setTimeout so if I press the button again, the whole process happens again.
How can I do it?
My example code:
function add(){
setTimeout(function() {
$(".line1").fadeIn(function(){
$(".lineBox").animate({width: "260px"},
function(){
$(".line2").fadeIn();
$(".text1").delay(250).fadeIn();
});
});
}, 500);
setTimeout(function() {
$(".heyyyyy").append("y");
}, 3000);
}
HTML::
<div onclick="add()"></div>
So how can I reset this setTimeout so if I run the add() function, it runs again ?
To control setTimeouut assign to it a global variable:
var cid = setTimeout(...);
When you need to reset it, call clearTimout first then setTimeout
clearTimeout( cid );
cid = setTimeout( ... ); //you must reassign it to same var if you plan to reset again.
Note setTimeout runs only once. Checkout setInterval if you're looking to run some code every few seconds.

Call JavaScript function after 1 second One Time

I have successfully managed to make a div hide on click after 400 milliseconds using a setInterval function. My issue is that it runs continually, I only need the function to execute once. After a quick search I discovered that the setInterval can be stopped by clearInterval. Am I using this incorrectly? The closeAnimation function is being executed on click. I modelled my code after the code on this page: http://www.w3schools.com/jsref/met_win_setinterval.asp
function closeAnimation() {
setInterval(function(){hide()}, 400);
clearInterval(stopAnimation);
}
var stopAnimation = setInterval({hide()}, 400);
If it needs to run just once you can use setTimeout
setTimeout(function () {
console.log('Hello world')
}, 1000)
setTimeout(() => {
console.log('Foo bar')
}, 1000)
You should use setTimeout():
setTimeout(function() {
getScore();
getResult();
}, 1800000);
The '1800000' is the time in milliseconds after which you want this function to execute. In this case, 30 minutes.

Categories

Resources