How do I correctly update setInterval using jquery/javascript? - javascript

So I have a div that fades in and out on the screen, and the rate at which this occurs is given by the value of an input which functions as a knob (by using knob.js). I want the user to be able to dynamically change the value on the knob, which will then set the new rate for setInterval. However, this is not happening, it continues to be stuck at the default value regardless of the change on the dial/knob. If anyone can point out what I'm doing wrong, or help in any way I would be very appreciative.
$(function (){
$(".dial").knob();
$("#reknob").val().trigger("change");
});
function fadeRed() {
$("#rediv").fadeOut();
$("#rediv").fadeIn();
}
function getRed() {
refreq=$("#reknob").val();
return refreq;
}
setInterval(function () {
fadeRed();
},getRed());

You need to use a change handler to reset the interval
$(function() {
var reknobInterval;
$("#reknob").knob({
change: function(v) {
reset(+v)
}
});
reset(+$("#reknob").val())
function reset(value) {
$("#rediv").stop(true, true).show();
clearInterval(reknobInterval);
reknobInterval = setInterval(fadeRed, value * 1000); //convert the delay to seconds
}
function fadeRed() {
$("#rediv").fadeOut().fadeIn();
}
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<input id="reknob" class="dial" data-width="150" data-cursor=true data-thickness=.3 data-fgColor="#222222" data-min="1" data-max="10" />
<div id="rediv">rediv</div>

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);

How can I put two functions (one must delay) in one onclick button?

I have a problem to combine to functions in one onclick button. This is how my product have to look like: I want to put a hammer down when I click on an invisible button, when the hammer reaches an icon, the icon has te become another picture.
This is the code I have, but it's in javascript and jquery:
$('.box hammer').on('click', function() {
$(this).toggleClass('clicked');
});
function changeImage1() {
var image = document.getElementById('safari');
if (image.src.match("bulbon")) {
image.src = "safari.png";
} else {
image.src = "safariflat.png";
}
}
You can bind multiple on handlers to the same element and event, that's not a problem.
Delaying one of those handlers can be done in many ways, how is up to you. Libraries like Underscore and lodash offer a number of delay types, such as debounce.
You should be able to use something like:
function immediateHandler() {
alert("Immediate handler!");
}
function lateHandlerImpl() {
alert("Late handler!");
}
var lateHandler = _.delay(lateHandlerImpl, 2500);
$('div.button').on('click', immediateHandler);
$('div.button').on('click', lateHandler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click Me!</div>
Replace the alerts with your logic (creating/switching the images) and change the timing to sync the image changes up, and you should be able to create a fairly convincing animation.
You could use setTimeout for this:
$('.box hammer').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
changeImage1();
// change time below to the time your animation takes
}, 5000);
});
function changeImage1() {
var image = document.getElementById('safari');
if (image.src.match("bulbon")) {
image.src = "safari.png";
} else {
image.src = "safariflat.png";
}
}

Change default image after click event jQuery

I want when I click in the image I get the new but after 1 second I want to get the default.
I added the function setTimeout(), but after one second I still have the same image (pressed.svg)
This is all my code :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language='Javascript'>
$(document).ready(function(){
$("#myImage").on("click",function() {
$(this).attr("src","images/pressed.svg");
setTimeout(function() {
$(this).attr("src","images/normal.svg");
},1000);
});
});
</script>
</head>
<body>
<img src="images/normal.svg" id="myImage">
</body>
</html>
The problem is that this in your anonymous function call refers to the wrong this. You need to assign the value of this in your handler to a temporary that will be used by the anonymous function:
$(document).ready(function() {
$("#myImage").on("click",function() {
var me = this;
$(me).attr("src", "images/pressed.svg");
setTimeout(function() {
$(me).attr("src", "images/normal.svg");
}, 1000);
});
});
You could accomplish the same thing using just the DOM, since you aren't doing anything jQuery specific:
$(document).ready(function() {
$("#myImage").on("click", function() {
var me = this;
me.src = "images/pressed.svg";
setTimeout(function() {
me.src = "images/normal.svg";
}, 1000);
});
});
Demo : http://jsfiddle.net/
JS Fix :
$(document).ready(function(){
$("#myImage").on("click",function() {
var $img = $(this);
$img.attr("src","images/pressed.svg");
setTimeout(function() {
$img.attr("src","images/normal.svg");
},1000);
});
});​
when you do $(this) in setTimeout, it wont work as there is no reference in settime out function. cache the element first and then use it in settimeout.

how to do jquery once fade out has finished?

I'm trying to fade out a div on a click but also change some css values.
the issue im having is that the values change while the fade out is happening (too early). I need the values to change once the fade out has finished:
<script type="text/javascript">
$('#r_text').click(function() {
$(".box1_d").fadeOut();
$(".box1_c").css("top","0px");
});
</script>
Now when i run that, everything works but just not exactly how i'd like it.. I need the css values to be changed once the fadeout has finished, not while it's still happening.
is this possible?
if so, any ideas how?
thank you.
Use a callback function to modify the .css() as the second parameter to fadeOut(). It will fire when the fade completes.
<script type="text/javascript">
var fadeTime = 500;
$('#r_text').click(function() {
$(".box1_d").fadeOut(fadeTime, function() {
$(".box1_c").css("top","0px");
});
});
</script>
Provided you use jQuery version >= 1.5, you can/should utilize the Deferred object instead of using the callback parameter:
$('#r_text').click((function () {
var animations = {
initial: function () {
return $(".box1_d").fadeOut(1500);
},
following: function () {
return $(".box1_c").css("top","0px").animate({fontSize: '150%'});
},
onDone: function () {
alert('DONE!');
}
};
return function(e) {
$.when(animations.initial())
.pipe(animations.following)
.done(animations.onDone);
e.preventDefault();
};
}()));
JsFiddle of it in action: http://jsfiddle.net/wGcgS/2/

Timer Reset Function Not Working!

Hello Guys!
I have been trying to create a simple sample code for my newest jQuery Plugin, but it doesn't seems to be working at all! Can anyone tell where I'm going wrong?, or can anyone provide me a new function to do it. So my problem is that when I mouse over an element classed trigger an another element classed eg should fadeIn(); but if the user takes out the mouse before the element classed eg fades in it should not be fading in anymore, but this is not working at all. I don't not what is getting wrong? Please help me out. (Below is my Problem HTML nad Jquery Code!)
HTML CODE
<div class="trigger">MouseOverMe</div>
<div class="eg">See Me!</div>
JQUERY CODE
function timereset(a)
{
var elem = $('.'+a);
if(elem.data('delay')) { clearTimeout(elem.data('delay')); }
}
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
$('div.eg').delay(1000).fadeIn();
});
$('div.trigger').mouseout(function () {
timereset('eg');
$('div.eg').fadeOut();
});
});
THANKS IN ADVANCE
You don't need that timereset stuff, simply call stop() on the object and the previous effect will stop:
http://api.jquery.com/stop/
Update based on the new comment:
$('div.trigger').mouseout(function () {
$('div.eg').stop().hide();
});
jQuery
$('.trigger').hover(function() {
$('.eg').delay(1000).fadeIn();
}, function() {
$('.eg').stop(true, true).hide();
});
Fiddle: http://jsfiddle.net/UJBjg/1
Another option would be to clear the queued functions like:
$('div.trigger').mouseout(function () {
$('div.eg').queue('fx', []);
$('div.eg').fadeOut();
});
Bear in mind if the fadeOut/In has already started by using stop you could end up with a semi-transparent element.
EDIT
Here's an example: http://jsfiddle.net/Qchqc/
var timer = -1;
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
timer = window.setTimeout("$('div.eg').fadeIn(function() { timer = -1; });",1000);
});
$('div.trigger').mouseout(function () {
if(timer != -1)
window.clearTimeout(timer);
$('div.eg').fadeOut();
});
});

Categories