I am trying to create a toggle effect for the delay function
Click on function:
$('#swap').on('click', function(e){
//code bellow $('#swap').delay(1000).attr('src') == 'Play.png'
if ($(this).attr('src') == 'Play.png') {
$('#swap').attr('src') == 'Pause.png'
}
else{
$('#swap').attr('src') == 'Play.png'
}
On click there starts a delay for another function:
$('#swap').delay(1000).attr('src') == 'Play.png'
And after that if you click on the #swap again the delay pauses (Not stops) and if you click again the delay then continues. Is this possible?
Because currently the delay would just start again from the beginning if clicked?
.delay()
Set a timer to delay execution of subsequent items in the queue.
(ex : animations like fadeIn(), fadeOut(), .slideUp(), slideDown()... )
Doc : http://api.jquery.com/delay/
In your case , Try to use :
setTimeout(function(){
// Do something
},1000);
If I understand, You mean somthing like this ..?
var clicked;
$('#swap').on('click', function(e) {
if(!clicked) {
setTimeout(function(){
$(this).attr('src','Play.png');
},1000);
clicked = true;
} else {
$(this).attr('src','Pause.png');
clicked = false;
}
});
Or use toggle event
$('#swap').toggle(function() {
setTimeout(function(){
$(this).attr('src','Play.png');
},1000);
},function() {
$(this).attr('src','Pause.png');
});
Doc : http://api.jquery.com/toggle-event/
Update :
$('#swap').on('click',function() {
var $this = $(this);
var src = $this.attr('src');
if (src == 'Play.png') {
setTimeout(function(){
$this.attr('src','Pause.png');
},1000);
} else {
$this.attr('src','Play.png');
}
});
Update with clearTimeout() :
var swapTimer;
$('#swap').on('click', function () {
var $this = $(this);
var src = $this.attr('src');
if (src == 'Play.png') {
swapTimer = setTimeout(function () {
$this.attr('src', 'Pause.png');
}, 1000);
} else {
clearTimeout(swapTimer);
$this.attr('src', 'Play.png');
}
});
Demo : http://jsfiddle.net/qnDh8/ (Play.png = red, Pause.png = yellow)
Related
I want to check if an element has a class after some time. Like delay. Basically the class is being added to the element by some other function. So If I check the hasClass on that clicked element it returns false.
var check_selected = $(this).hasClass('selected');
if ( $(this).hasClass('selected').delay(500) ) {
console.log(check_selected);
}
This is what I am trying but I want to know if we can add delay to hasClass, or any other way to achieve this. But it is not working
As per answers suggested I tried this -
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);
But no outcome now in console.
Just to update -
The class is being applied on click, and the same click I basically wants to know if the class is applied, so I am using hasclass. Is there any other way out, or am I doing it wrong
EDIT -
var _this = this;
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(_this).hasClass('selected') ) {
console.log(check_selected);
}
}, 5000);
I am trying this but still getting false
UPDATE -
var checkSelected = setInterval(function(){
var check_selected = $(_this).hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
This worked!!
Try setTimeout for simulating the delay. And if you want to test this repeatedly until you get it selected you can try setInterval(function(){}, interval). You need to call clearInterval if you want to stop calling the function.
$("#test").on("click", function(){
const component = $(this);
setTimeout(function(){
component.addClass("selected");
}, 600);
setTimeout(function(){
var check_selected = component.hasClass('selected');
console.log(check_selected);
}, 500);
var checkSelected = setInterval(function(){
var check_selected = component.hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Check my class</div>
you can use setTimeout its javascript function that does callback execution after the miliseconds passed in as second parameter
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);
You can use timer function
var currObj = this;
setTimeout(function(){
var check_selected = $(currObj ).hasClass('selected');
if ($(currObj).hasClass('selected')) {
console.log(check_selected);
}
},500);
I want to auto reload div in my site. If I click to bottom the script reload another div when i use clearInterval to stop interval1 it not working the script reload again interval1 ,when i use console.log interval i find false and the script reload again clearInterval not working or??
<script type="text/javascript">
var interval2;
var interval1;
$(document).ready(function() {
var get_template = function() {
$("#live-grouped-odds-current").load("template.php");
}
interval2 = setInterval(get_template, 6000);
$("#live_details").click(function() {
clearInterval(interval2);
console.log(interval2);
$('#live-overview-menuitem').removeClass('Actual');
$('#live_details').addClass('Actual');
$("#button_sp").css('display', 'none');
$("#button_dt").css('display', 'block');
clearInterval(interval2);
interval2 = false;
$("#live-grouped-odds-current").empty();
$("#loader12").css('visibility', 'visible');
$("#live-grouped-odds-current").load("details.php");
});
$("#loader12").css('visibility', 'visible');
$.get("details/events.php", function(data1) {
$("#event_list").html(data1);
});
$("#loader12").css('visibility', 'hidden');
var refresh = function() {
$.get("details/events.php", function(data1) {
$("#event_list").html(data1);
});
$.get("details/simple_event.php", function(data) {
$("#simple_event").html(data);
});
}
interval1 = setInterval(refresh, 6000);
});
function simple_event(id) {
clearInterval(interval1);
$('.Event').removeClass('Actual');
$("#" + id).attr('class', 'Actual');
$("#simple_event").empty();
$("#loader12").css('visibility', 'visible');
$.get("details/simple_event.php?id=" + id, function(data) {
$("#simple_event").html(data).hide();
$("#simple_event").slideDown(1000);
//alert( "Load was performed." );
$("#loader12").css('visibility', 'hidden');
});
interval1 = setInterval(refresh, 6000);
}
</script>
When you call clearTimeout it means the interval will not be triggered again, but if $("#live-grouped-odds-current").load("template.php"); is still running it will complete. If $("#live-grouped-odds-current").load("template.php"); takes more time than 6000ms you will begin to do multiple request in parallel as well. (It would be better to use setTimeout I think)
Once you call clearInterval(interval2) the first time, set interval2 to undefined
$("#live_details").click(function() {
clearInterval(interval2);
inteval2 = undefined;
});
and change get_template to
var get_template = function() {
$.get("template.php", function( data ) {
if (inteval2 !== undefined) {
$("#live-grouped-odds-current").html( data );
}
});
}
so #live-grouped-odds-current won't be undated if the interval has been cleared
I am facing one problem in JS, please help me to resolve this.. I have two methods they are simultaneously executing one after other.. I have to stop them after second click on image.
Below is my JS code
I am calling fadeIn(img1, img2, img3) after first click on image then some animation will be goes on, once I click second time the whole animation(method execution) should be stopped.
var t1 = 0;
var t2 = 0;
function fadeIn(img1, img2, img3) {
$(imgIdForClick_1).addClass('animated pulse');
$('#cashBar1').addClass('animated pulse');
$('#cashBarDec1').addClass('animated pulse');
var t1 = setTimeout(function() {
fadeOut(img1, img2, img3);
if (clickCount_1 >= 2) {
alert("clicked 1");
return false;
}
}, 500);
//t1 = setTimeout(fadeOut, 500);
};
function fadeOut(img11, img22, img33) {
$(imgIdForClick_1).removeClass('animated pulse');
$('#cashBar1').removeClass('animated pulse');
$('#cashBarDec1').removeClass('animated pulse');
var t2 = setTimeout(function() {
fadeIn(img11, img22, img33);
if (clickCount_1 >= 2) {
alert("clicked 2");
return false;
}
}, 500);
//t2 = setTimeout(fadeIn, 500);
};
By below code I am calling this snippet in first click
imgId1 = $('#img1');
imgId2 = $('#cashBar1');
imgId3 = $('#cashBarDec1');
fadeIn(imgId1, imgId2, imgId3);
After second click
clickCount_1 varibale will be 2
clearTimeout(t1);
clearTimeout(t2);
See the DEMO. Click on the image to stop animation.
I have added a flag that would be checked upon the call of the function, and if the value is true then and then only the functions would be called. The flag would be set to false when clicked on image, so the function would be called no longer.
code:
var animate = true;
function fadeIn() {
$('#pulseDiv').find('div#advisersDiv').delay(400).addClass("pulse");
if(animate == true)
{
setTimeout(fadeOut,1000);
}
};
function fadeOut() {
$('#pulseDiv').find('div#advisersDiv').delay(400).removeClass("pulse");
if(animate == true)
{
setTimeout(fadeIn,1000);
}
};
fadeIn();
$('#image').click(function(){
animate = false;
alert('now the animation will stop');
});
In context to the previous question:-
Keep a second div visible if the mouse is over the first or second div
How one would make it so the second div is displayed after some delay (that's 1 second) and then keep the div visible if the mouse is over the first or second div.
I've made some progress, but it's not working. Why is it not working?
Current progress :-
var display = false;
$(".the-dropdown, .menu-item").hover(function () {
display = true;
setTimeout(function () {
show_sub_menu($(this));
}, 1000);
}, function () {
display = false;
setTimeout(function () {
hide_sub_menu($(this));
}, 1000);
});
function show_sub_menu(obj) {
//alert(obj); // debugging
if (display === true) {
obj.show();
}
}
function hide_sub_menu(obj) {
if (display === false) {
obj.hide();
}
}
jsfiddle
For those who are seeking answer to this question:-
jsfiddle
var display = false;
$(".the-dropdown, .menu-item").hover(function () {
display = true;
setTimeout(function () {
if (display === true) {
$('.the-dropdown').show();
}
}, 300);
}, function () {
display = false;
setTimeout(function () {
if (display === false) {
$('.the-dropdown').hide();
}
}, 100);
});
TRY This : DEMO
$('.menu-item , .the-dropdown').hover(
function(){
$("div.the-dropdown").delay('1000').show();
}
, function(){
$("div.the-dropdown").delay('1000').hide();
}
);
I use this tab view that developed base on jQuery:
https://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html#
I change the code that tabs change by mouseenter event. and I want to delay execution of the mouseenter event so if mouse enter the elemnt and remain there for portion of time mouseenter executes else (if mouse go outside in time less that that portion of time) mouseenter does not execute.I write this code:
$(document).ready(function () {
$('a.tab').on('mouseenter', function () {
var thisElement = $(this);
setTimeout(function () {
$(".active").removeClass("active");
thisElement.addClass("active");
$(".content").slideUp();
var content_show = thisElement.attr("title");
$("#" + content_show).slideDown();
}, 300);
});
});
but if I bring mouse out of element mouseenter excecutes.How to solve this problem?
thanks
You need to store the timeout handle and cancel it on mouseleave:
var timeout;
$(document).ready(function () {
$('a.tab').on('mouseenter', function () {
var thisElement = $(this);
if (timeout != null) { clearTimeout(timeout); }
timeout = setTimeout(function () {
$(".active").removeClass("active");
thisElement.addClass("active");
$(".content").slideUp();
var content_show = thisElement.attr("title");
$("#" + content_show).slideDown();
}, 300);
});
$('a.tab').on('mouseleave', function () {
if (timeout != null) {
clearTimeout(timeout);
timeout = null;
}
});
});