Cancel event when delay was not met? [closed] - javascript

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.

Related

Call function in itself in callback [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 5 years ago.
Improve this question
i am not quite sure that Title related to my problem, so sorry.
I have asynchronous function that call callback function. So the main idea is I want to call function "dodo" each time after "asyncFunc" is done.
Are there some patterns for that? Are there issues releated to memory leak ?
var can = true;
function dodo() {
if(can)
{
can = false;
asyncFunc(function(data) {
doSmth();
can = true;
});
}
}
setInterval(dodo, 0);
The main idea is I want to call function "dodo" each time after "asyncFunc" is done.
So just call it there:
function dodoForever() {
asyncFunc(function(data) {
doSmth();
dodoForever(); // <==
});
}
dodoForever();
You don't need a global can state and setInterval.
You can just call it. Like so.
var can = true;
function dodo() {
if(can)
{
can = false;
asyncFunc(function(data) {
dodo(); // this will run `dodo` function again.
doSmth();
can = true;
});
}
}
setInterval(dodo, 0);
As the comments mention this will blow the stack up. You have dodo running every 0ms. This will basically call dodo a TON of times and that is basically all your program will be doing. I can't think of a use case where this would be necessary and it probably won't fair so well in terms of performance.
Really think about why you are trying to run it like that and what the end goal is.

How To Stop setTimeout() That Has Already Fired [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 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 = [];
});

Alternative action if event does not occur javascript/jquery

I have a probably really simple question but did not find anything about this or maybe did not find the right words for my problem.
If have a function to be executed on keypress which also changes my variable A - fine, and it works.
But now I want to give an alternative value to my variable A if the keypress event is not happening.
So I'm looking for the correct command for the naive logic of
if ("keypress event happens") {
A = 1
} else {
A = 2
}
Is there any way to do that in js or jquery with simple true/false checks for the key event?
I've been trying and trying and it did not work once.
Usually, the way one solves this problem is with a setTimeout(). You set the timer for N seconds. If the keypress happens, you cancel the timer. If the keypress doesn't happen, the timer will fire giving you your alternate event.
You probably wrap this in some sort of function that you can trigger whenever you want, but you didn't share the overall context so this is just the general idea:
$("#myObj").keypress(function(e) {
if (timer) {
clearTimeout(timer);
}
// process key
});
var timer = setTimeout(function() {
timer = null;
// key didn't happen within the alltoted time so fire the alternate behavior
}, 5000);

Can I add a delay in between 'click' and 'addClass' in jQuery? [duplicate]

This question already has answers here:
delayed addclass/remove class function not working
(2 answers)
Closed 9 years ago.
Can I add a delay before the addClass method?
This doesnt seem to be working for me.
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
$(".secondObj").delay(1000).addClass('glow');
$(".thirdObj").addClass('topGlow');
)};
Thanks
From the documentation:
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.
Therefore .delay() is not a substitute for JavaScript's setTimeout().
Use this:
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
setTimeout(function(){ $(".secondObj").addClass('glow'); }, 1000);
$(".thirdObj").addClass('topGlow');
)};
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
setTimeout(function () {
// Wait 1 second and add the class
$(".secondObj").addClass('glow');
}, 1000);
$(".thirdObj").addClass('topGlow');
});
Yes, but not using the jQuery delay function, as the action needs to be on the animation queue (or, "an" animation queue, if you define one) for that to work; use setTimeout instead:
setTimeout(function() { /* */ }, timeout);
You can use the queue() method's callback to fire your code after the delay completes.
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
$(".secondObj").delay(1000).queue(function() {
$(this).addClass('glow');
});
$(".thirdObj").addClass('topGlow');
)};

Javascript - setTimeout function [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
i try to develop a page and i have to use setTimeout function because i need to load my video in my page two seconds later.
In order to do that, i wrote this,
window.onload = function () {
player = new Player('playerObject');
setTimeout(player.playByUrl($mp4Link),3000);
}
but this is not working why ?
Use callback:
setTimeout(function(){
player.playByUrl($mp4Link);
},3000);
With your previous statement, the code was executing immediately (because you were calling it directly by specifying param and parenthesis eg playByUrl($mp4Link)) whereas setTimeout needs a callback.
You cannot add parameters to the function. However you can simply use an anonymuos function as callback and call the function in there (with the parameters).
window.onload = function () {
player = new Player('playerObject');
setTimeout(function() {
player.playByUrl($mp4Link);
}, 3000);
}
setTimeout requires a function
window.onload = function () {
player = new Player('playerObject');
setTimeout(function(){
player.playByUrl($mp4Link);
},3000);
}
You need to pass a function reference to setTimeout, but I guess the return value from .playByUrl() is not a function. So either go with
setTimeout(function() {
player.playByUrl($mp4Link);
},3000);
or use ES5 .bind()
setTimeout(player.playByUrl.bind(null,$mp4Link),3000);
player.playByUrl($mp4Link) is the returned value.
try
setTimeout("player.playByUrl($mp4Link)",3000);
or
setTimeout(player.playByUrl,3000, $mp4Link);
The latter does not work with IE and so should be modified.
try to add player.load(); as follow:
player.load();
setTimeout(function(){
player.setAttribute("src","http://www.w3school.com.cn/example/html5/mov_bbb.mp4");
player.play();
},5000)

Categories

Resources