How to stop toggling classes [duplicate] - javascript

This question already has answers here:
Stop setInterval call in JavaScript
(7 answers)
Closed 7 years ago.
This is how I started toggling classes:
$(document).ready(function() {
window.setInterval(function() {
$('.blinkClass').toggleClass('blink');
}, 500);
});
How can I stop toggling these classes?

You need to store the timer returned from setInterval to a variable which you can then use in a call to clearInterval():
var timer = window.setInterval(function() {
$('.blinkClass').toggleClass('blink');
}, 500);
// later on, in a code block within scope of the above variable...
clearInterval(timer);

You can do this :
$(document).ready(function() {
var myVar = window.setInterval(function() {
$('.blinkClass').toggleClass('blink');
}, 500);
//when you want
myStopFunction(myVar)
});
function myStopFunction(par) {
clearInterval(par);
}
See more info at
setInterval
clearinterval

Related

How to refresh a script after some time using Javascript

There is a variable I want to update every minute.
So am curious whether there is a way in Javascript where I can refresh the whole script after some time instead of the variable itself.
<script>
function vName(){
videos = $('#videos').text();
}
vName();
Use setInterval. Here hello will print each and every 3sec
setInterval(function(){ console.log("Hello"); }, 3000);
You could achive this using an event to listen to the element's change:
(function () {
"use strict";
let videos = '';
$("#videos").on("change", evt => {
videos = $(evt.target).val();
console.log(videos);
});
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="videos" type="text">
Solution
Set interval is a function which is being used to perform any functionality after a specific desired time span . The function is always called again and again after that time period . The below code is an example for setInterval.
Code:-
setInterval(function(){ alert("Video is here "); }, 9000);
Explanation
you can call any method in place of "alert("Video is here")" and the desired time period is being given in place of "9000" that means the specific function is being called after every 9 seconds
You can put your code in setInterval() function, like this
setInterval(()=>{
//your script here
function vName(){
videos = $('#videos').text();
}
vName();
}, 60000);

Javascript: automatize function [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 6 years ago.
Good day,
I have a piece of code that is aimed to perform action on mouse click. First I have made a function that scrolls screen on element when I perform a click on another element:
(function($) {
$.fn.goTo = function() {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
}
})(jQuery);
than I assign this function to specific DOM elements:
$('#collapse1').on('shown.bs.collapse', function () {
$('#s1').goTo();
});
$('#collapse2').on('shown.bs.collapse', function () {
$('#s2').goTo();
});
$('#collapse3').on('shown.bs.collapse', function () {
$('#s3').goTo();
});
$('#collapse4').on('shown.bs.collapse', function () {
$('#s4').goTo();
});
etc...
"shown.bs.collapse" is actually from bootstrap collapse.js.
"This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete)."
The code is working but it is really not looks good. Is there the way to make some sort of cycle? Standard "for" is not working:
var collapseNumber = jQuery.makeArray(document.getElementsByClassName("panel panel-default"));
for (var i = 0; i < collapseNumber.length; i++) {
$('#collapse' + i).on('shown.bs.collapse', function () {
$('#s' + i).goTo();
});
}
created array is for getting actual number of elements, which I need to put in the cycle.
The problem you have is the infamous for loop issue where the value of i is the last value. But there is no reason to have to loop when a simple data attribute can be used.
Just use a data-attribute to select and link the things
<div data-goto="#s1">...</div>
and the JavaScript
$('[data-goto]').on('shown.bs.collapse', function () {
var selector = $(this).data("goto");
$(selector).goTo();
});

what to use instead of .toggle() method in jQuery-1.9.1 or later [duplicate]

This question already has answers here:
What to use instead toggle?
(1 answer)
how to use .toggle with jquery 1.9
(2 answers)
Closed 9 years ago.
See my code below
$(document).ready(function() {
creatersdropdown();
var $dropTrigger = $(".rsdropdown dt a");
var $languageList = $(".rsdropdown dd ul");
// open and close list when button is clicked
$dropTrigger.toggle(function() {
$languageList.slideDown(200);
$dropTrigger.addClass("active");
}, function() {
$languageList.slideUp(200);
$(this).removeAttr("class");
});
});
.toggle() is not working with jQuery-1.9.1 or later, so what is the instead of .toggle() method?
how to write the code above without using .toggle() in jQuery-1.9.1 or later?
you can use .is('visible') jquery method. and do as you wish
in your case it would be something like :
$("#someButton").click(function () {
if ($dropTrigger.is('visible')) {
$languageList.slideUp(200);
$(this).removeAttr("class");
}else {
$languageList.slideDown(200);
$dropTrigger.addClass("active");
}
});

Combining actions on event handlers in jQuery [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 9 years ago.
Improve this question
Below is a jQuery statement which hides a div element on it's click event. I'd like the element to fade out regardless if it isn't clicked after 5 seconds. Is there a simple way I can call the fadeOut function in the same expression or without the click event interfering with the animation?
$(".fadeOutbox").click(function(){
$(this).fadeOut('slow');
});
Most jQuery components are chain-able, your function as it stands returns a reference to the initial object.
You can achieve what you want simply by using:
$(".fadeOutbox").click(function () {
$(this).stop().fadeOut('slow');
}).delay(5000).fadeOut('slow');
Basically reads as onclick, fade out otherwise fade out after 5 seconds.
I assume this is inside another function that shows the box to begin with. This solution will hide the box after 5 seconds, or immediately upon clicking.
var $box = $('.fadeOutbox');
var fadeOut = function() {
clearTimeout(timeout);
$box.fadeOut('slow');
};
var timeout = setTimeout(fadeOut, 5000);
$box.click(fadeOut);
Save the fact that the user has clicked or not and test it in the timer
var isClicked = false;
setTimeout(function () {
if(!isClicked)
$(".fadeOutbox").fadeOut('slow');
}, 5000);
$(".fadeOutbox").click(function () {
isClicked = true;
});
Try this:
var wasClicked = false;
$(".fadeOutbox").click(function () { wasClicked = true; });
setTimeout(function () {
if(wasClicked = false)
$(".fadeOutbox").fadeOut('slow');
}, 5000);
Use a timeout not inside of the click handler:
setTimeout(function () {
$(".fadeOutbox").fadeOut('slow');
}, 5000);
Your jQuery code becomes:
// set a timeout for 5 seconds
setTimeout(function () {
$(".fadeOutbox").fadeOut('slow');
}, 5000);
// attach click handler
$(".fadeOutbox").on("click", function () {
$(this).fadeOut('slow');
});
JSFIDDLE
Edit to clarify:
var clear = setTimeout(function(){ $(".fadeOutbox").fadeOut('slow'); }, 5000);
$(".fadeOutbox").on('click', function(){
clearTimeout(clear);
});
Demo: http://jsfiddle.net/mGbHq/
Try holding a variable for the timeout and clear it every time the user clicks.
Working example
// Timeout variable
var t;
$('.fadeOutBox').click(function()
{
$box = $(this);
$box.fadeIn("fast");
// Reset the timeout
clearTimeout(t);
t = setTimeout(function()
{
$box.fadeOut("slow");
}, 5000);
});
Hope this helps you.
Wow, none of the answers gives the simple solution: Use setTimeout and cancel the timeout on click:
$(".fadeOutbox").click(function () {
// Cache the jQuery object
var $this = $(this);
// Do we already have a timer running?
var timer = $this.data("timer");
if (timer) {
// Yes, cancel it
clearTimeout(timer);
$this.removeData("timer");
}
// (You may want an `else` here, it's not clear)
// In five seconds, fade out
$this.data("timer", setTimeout(function() {
$this.removeData("timer");
$this.fadeOut('slow');
}, 5000));
});
I'm not 100% sure that the above is triggering on the events you want, but the two pieces of relevant code are this, which schedules the timed action:
// In five seconds, fade out
$this.data("timer", setTimeout(function() {
$this.removeData("timer");
$this.fadeOut('slow');
}, 5000));
and this, which cancels it (for instance, on click):
var timer = $this.data("timer");
if (timer) {
// Yes, cancel it
clearTimeout(timer);
$this.removeData("timer");
}
Try
$('#div').delay(5000).fadeOut(400)
Demo

JQuery Hover Function Timeout

I've seen other similar questions to this on SO but the answers weren't quite what I'm looking for. My problem with the code below is about the variable hide.
In it's current form hide won't be visible to the first hover function, but I don't want to declare it at a higher scope because it has no use there. Plus declaring it at a higher scope would require making a different variable for every li.
What's the solution for keeping this variable containing a timeout between these two functions?
$('li').hover(function() {
clearTimeout(hide);
$('.menu', this).show();
}, function() {
var menu = $('.menu', this);
var hide = setTimeout(function() {
menu.hide();
}, 500);
});
You can store the value with .data()
$('li').hover(function() {
clearTimeout($(this).data('hide'));
$('.menu', this).show();
}, function() {
var menu = $('.menu', this);
$(this).data('hide', setTimeout(function() {
menu.hide();
}, 500));
});

Categories