How To Stop setTimeout() That Has Already Fired [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am wondering how would I stop a setTimeout() that has already started? In my example below I have two buttons: .start and .cancel. Pressing .start would invoke the timer which will execute a console.log() after 2 seconds. I am trying to get the behavior where clicking .cancel would stop the timer from executing and to clear its queue. Is this possible?
The issue I am experiencing is that if I click on .start, and then immediately click on .cancel before the 2 second, I will still see btn clicked in the console. I do not want to see that console message.
var timer;
$('.start').on('mousedown', function() {
timer = setTimeout(function() {
console.log('btn clicked');
}, 2000);
});
$('.cancel').on('mousedown', function() {
clearTimeout(timer);
});
https://jsfiddle.net/xL8yquoL/

Your code cancels a single timer, but you could create several by clicking "start" many times.
If you need to cancel several timers you could keep an array of timer references.
In this example, each .cancel click clears the last timer created, because array.pop removes and returns the last item in array.
var timers = [];
$('.start').on('mousedown', function() {
timers.push(setTimeout(function() {
console.log('btn clicked');
}, 2000));
});
$('.cancel').on('mousedown', function() {
clearTimeout(timers.pop());
});
https://jsfiddle.net/xL8yquoL/1/
If you need to clear every timer with one click:
$('.cancel').on('mousedown', function() {
timers.forEach(clearTimeout)
timers = [];
});

Related

Is it possible to call local storage inside a function and use it in Windows.onload? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have a on click function which return 'x' and stores in div dynamically. After a page refresh, this dynamic div resets and the data is gone. But i want the data to stay. To do that i stored that in local storage and want to call later when page loads. I store it in local storage inside the function 'test'
and calling it in windows.onload which is returning null. I understand that i am unable to call the local storage inside the function. My question: Is there a way to call the local storage inside the function 'test'
function test(parameter1, parameter2) { // this is an onclick function
// some functionality
return x;
var test = x.innerHTML;
localStorage.setItem('somediv', test);
}
window.onload = function () {
var test2 = localStorage.getItem('somediv')
$('div.somediv').text(test2);
}
You are using localStorage fine.
The thing is, if you return x; in your text() function, the code below is never executed, so it never actually sets the localStorage variable.
That is why you get null when you are trying to access it.
Try this, you will get an idea.
Click me
<script>
function test(param) { // this is an onclick function
localStorage.setItem('somediv', param);
alert('ok');
}
window.onload = function () {
if(localStorage.getItem('somediv')==null){
return;
}
var test2 = localStorage.getItem('somediv')
//$('div.somediv').text(test2);
alert(test2);
}
</script>

jquery function executing without the event happening [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have a few functions that are executed immediately
function calcTheSize() {
console.log("exec 1")
};
calcTheSize();
function setImages() {
console.log("exec 2")
};
setImages();
I also want them to run on a resize event like this
$window.resize(function() {
calcTheSize();
setImages();
});
The problem is I am getting
exec 1
exec 2
exec 1
exec 2
exec 1
exec 2
without any resizing
The window resize might be executed because you have your console open, scrolled, or an overflow (scrollbar) is added/removed. In any case, events like these should be registered when the DOM has finished loading.
$(document).ready(function (e) { // or use $(function() { ... }
$(window).on("resize", (e) {
calcTheSize();
setImages();
}
}

Execute javascript function every second while the button is pressed [duplicate]

This question already has answers here:
JavaScript while mousedown
(3 answers)
Closed 4 years ago.
I need to execute a javascript function continuosly (every second or half a second for example), but this needs to happen while a button is pressed.
I tried with the following:
$("#buttonID").bind('touchstart',function(event){
setInterval(function() {
FUNCTION
}, 1000);
});
It is not working that way, using "mousedown" either.
What it's answered on question JavaScript while mousedown
did not solve my issue, so I don't consider this question as a duplicate.
Is there a beginner's mistake and I'm not seeing it? what do you suggest?
You have to capture a reference to the timer and cancel it when the mouse is released.
var timer = null; // Will hold a reference to the timer
$("#buttonID").on('mousedown',function(event){
// Set the timer reference
timer = setInterval(function() {
console.log("Function running");
}, 1000);
});
$("#buttonID").on('mouseup',function(event){
clearInterval(timer); // Cancel the timer
console.log("Timer cancelled.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonID">Hold me down to run function!</button>

Return var in a Jquery function [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
I want return the var "Page" in a Jquery function :
var Page ;
$('#Montant').dblclick(function(){
$("#Encadrement_Encaissement_Menu_Creation").show();
return Page = 'Crea_Bouton';
});
alert(Page); //does not work
But its does not work.
The goal is not to make an alert of the var Page.
In a other page i have : if(Page == 'Crea_Bouton') { //Action }
So, Page must be a global var
Can you help me, please?
There's several issues here. First of all, Page and page are two different variables, but let's assume you've named them the same - your code still won't work.
The problem is, your event handler is not run immediately, it's only run when the double click occurs. Defining page outside of the event doesn't make any sense in this context. What happens is it hits var page; first, then it registers an event (but DOES NOT run the event function), then alerts an empty variable (because the event has not been triggered yet).
When you do trigger the dblclick event, that alert doesn't get executed.
Try this:
var page;
$('#Montant').dblclick(function(){
$("#Encadrement_Encaissement_Menu_Creation").show();
page = 'Crea_Bouton';
});
$('#anotherdiv').click(function(){
if(page === 'Crea_Bouton'){
alert("yep!");
}else{
alert("Something else")
}
})
Now, when your #anotherdiv is clicked, it will only alert 'yep!' if the original Montant div has been double clicked first. Otherwise it'll do something else (or nothing at all if you omit the else).
Here's an example jsfiddle:
http://jsfiddle.net/Wb9Ba/
If you click the second button right away, it says "Something else", but if you double click the first button, and then click the second button, it says "yep!"
Use a "callback" function as jQuery does:
function onReturn(page) {
// Process your returned value
if (page == 'Crea_Bouton') {
// Action
alert(page);
}
}
$('#Montant').dblclick(function(){
$("#Encadrement_Encaissement_Menu_Creation").show();
var page = 'Crea_Bouton';
onReturn(page);
});
Or process your value inside the dblclick callback:
$('#Montant').dblclick(function(){
$("#Encadrement_Encaissement_Menu_Creation").show();
var page = 'Crea_Bouton';
// Do something with my page
if (page == 'Crea_Bouton') {
// Action
alert(page);
}
});
Since the anonymous method inside dblclick is asynchronous, it's impossible to return something.
Instead, you may create a new function:
var page;
$('#Montant').dblclick(function () {
$("#Encadrement_Encaissement_Menu_Creation").show();
display('Crea_Bouton');
});
function display(page) {
alert(page);
// ...
}

Cancel event when delay was not met? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need to be able to cancel an event based on the amount of time an element is hovered on. Say when I set the delay to 500ms, when the element is being hovered on for less than that, an event should be cancelled, otherwise it is fired. The delay() and setTimeout() function seem incapable of doing that.
You can try something like this instead of using jQuery delay method.
Working demo
var timeoutId = null;
$("selector").hover(function(){
if(timeoutId)
clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
alert("do your stuff here");
}, 5000);
}, function(){
clearTimeout(timeoutId);
});
Someone might come up with something cleaner but the code below will be able to handle what you are asking. It requires 500 milliseconds to pass before the code inside the event can be triggered again. Could probably clean it up so that timer/delayMet aren't potentially global variables.
I'm using $('a').click as an example selector and event.
var timer,
delayMet = true;
$('a').click(function () {
if(delayMet === true) {
// your code here
}
else {
delayMet = false;
setTimeout(function () {
delayMet = true;
}, 500);
}
});
You can cancel setTimeout() by doing the following.
var timer = setTimeout(function(){...},5000);
...
clearTimeout(timer);
From jQuery .delay() docs:
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Not sure if that is what you mean though.

Categories

Resources