This question already has answers here:
Cancel/kill window.setTimeout() before it happens
(2 answers)
Closed 7 years ago.
I wrote this simple Javascript for auto and manually hiding bootstrap alerts.
$(function () {
$.ajaxSetup({ cache: false });
$("[data-hide]").on("click", function () {
$(this).closest("." + $(this).attr("data-hide")).hide();
});
window.setTimeout(function () {
$(".alert").fadeTo(700).slideUp(700, function () {
$(this).hide();
});
}, 5000);
});
I want to cancel the setTimeout when the cancel button is clicked. How can I do this?
setTimeout returns a numeric timeoutId for your timer. You can pass that to the clearTimeout method.
$(function () {
var t = window.setTimeout(function () {
$(".alert").fadeTo(700).slideUp(700, function () {
$(this).hide();
});
}, 5000);
$("#yourHideButtonId").on("click", function () {
if(t!=null)
{
clearTimeout(t);
}
});
});
To start timer:
timer = window.setTimeout( f , 5000);
To clear it:
window.clearTimeout(timer);
Related
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 4 years ago.
I'm writing a small script who, on mouse hover, add class and on mouse leave remove class. Remove must be with delay.
Following script just addClass and don't work on removeClass. I don't get error...
$(".result").hover(
function () {
$(this).addClass("current");
},
function () {
setTimeout( function () {
$(this).removeClass("current");
}, 800)
}
);
The same script, but withouth setTimeout, work...
$(".result").hover(
function () {
$(this).addClass("current");
},
function () {
$(this).removeClass("current");
}
);
Can anyone help me?
Thanks!
Inside the setTimeout the context of this is different. In that case you can use the arrow function () as shown in example two or use .bind to bind the scope to the current context
$(".result").hover(
function() {
$(this).addClass("current");
},
function() {
setTimeout(function() {
$(this).removeClass("current");
}.bind(this), 800)
});
// with arrow function
$(".result2").hover(
function() {
$(this).addClass("current2");
},
function() {
setTimeout(() => {
$(this).removeClass("current2");
}, 800)
});
.current {
color: red;
}
.current2 {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='result'> I am the result </div>
<div class='result2'> I am the result2 </div>
How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.
Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:
$('#text1').hover(function () {
hey();
});
Besides that, anyone knows why my fourth content isn't showing?
I am new in this. Please guide me. Many thanks in advance.
Use setTimeout() function
setTimeout(function () {
hey();
},5000);
Fiddle Updated Fiddle
EDIT
As per your need shoe after 35 seconds
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT
Just add setTimeout(hey, 5000); instead hover handler:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}
Your hey() is showing upto 3rd text.Add another next() transition.
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}
If you want to change content automatically after 5 second you should use setTimeout function, for example:
setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...
I Think you have to use setInterval()
setInterval(function(){ hey(); }, 3000);
See this Link what is difference between setTimeout and
setInterval
$("#customerAdded").modal("show").on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
}, 5000);
location.reload();
});
Ok, it works. But with location.reload(), despite I change the time, the page is reloaded immediately.
I would, after modal closed, that the page was reloaded according the time specified.
You could just fire the location.reload() when you hide your modal:
$("#customerAdded")
.modal("show")
.on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
location.reload();
}, 5000);
});
$("#customerAdded").modal("hide").on("hidden.bs.modal", function () {
location.reload();
});
Here is the code
$('#customerAdded').on('hidden', function () {
location.reload();
})
This question already has answers here:
Event capturing jQuery
(3 answers)
Closed 8 years ago.
I need to make the event of the window to be triggered first, on clicking on the #myDiv, is there a way to do it?
(function ($, w, d) {
$(d).ready(function () {
$(w).click(function() {
alert('window has been clicked');
});
$('#myDiv').click(function () {
alert('myDiv has been clicked');
});
});
})(jQuery, window, document);
check this out http://jsfiddle.net/au1hpj5L/
You could wrap the anonymous #myDiv function in a setTimout call set for 0 seconds, which would delay its execution in the event loop.
http://jsfiddle.net/2y5h8fgz/
(function ($, w, d) {
$(d).ready(function () {
$(w).click(function() {
alert('window has been clicked');
});
$('#myDiv').click(function(){
setTimeout(function () {
alert('myDiv has been clicked');
}, 0);
});
});
})(jQuery, window, document);
This question already has answers here:
setTimeout / clearTimeout problems
(8 answers)
Closed 9 years ago.
I need to trigger a method when a hover is made on a button for continous 1000 ms. Whenever hover is on other elements then timeout should be reset. How do I implement such thing using javascript/ jquery ?
Preferred solution would be one not requiring use of new plugin.
Try
$(function(){
var timer;
$('.item').hover(function(){
timer = setTimeout(function(){
console.log('do it')
}, 1000);
}, function(){
clearTimeout(timer);
});
})
Update:
$(function(){
$('body').on('mouseenter', '.item', function(e){
var timer = setTimeout(function(){
console.log('do it', e.target)
}, 1000);
$(this).data('myTimer', timer);
}).on('mouseleave', '.item', function(e){
clearTimeout($(this).data('myTimer'));
});
})
Demo: Fiddle