Develop Reference

Run JS code when user finished typing

I have a lot of input fields with the same class. When the user finishes typing the function doneTyping should run.
I tried this but somehow it doesn't work.
Can I use one function for all the input fields I have?
$(function() {
console.log('ready');
var timer;
var doneTypingInt = 5000;
$('.typing').keyup(function(){
clearTimeout(timer);
if ($('.typing').val()) {
timer = setTimeout(doneTyping, doneTypingInt);
}
});
function doneTyping () {
console.log('function doneTyping');
}
});

what you're looking for is debounce
$('.typing').keypress(_.debounce(yourfunc, 3000))

You basically want to use the keypress function. Your adjusted code:
$(function() {
console.log('ready');
var timer;
var doneTypingInt = 5000;
$('.typing').keypress(function(event){
if(timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(doneTyping, doneTypingInt);
});
function doneTyping () {
console.log('function doneTyping');
}
});

I don't think that you have something wrong in your code, you just have to wait 5 seconds to see the result, and in order to use one function for all inputs with the "typing" class, you should use the bind method as follows:
Javascript code: (Jsfiddle)
$(function() {
console.log('ready');
var timer;
var doneTypingInt = 1000;
$('.typing').keyup(function(){
clearTimeout(timer);
if ($('.typing').val()) {
timer = setTimeout(doneTyping.bind($(this)), doneTypingInt);
}
});
function doneTyping () {
alert('function doneTyping ' + this.val());
}
});

Disable timer within setInterval function with dynamic parameters

I wanted to pass dynamic parameters into a setInterval function (see question here) and specifically #tvanfosson's comment.
But now, I also want to disable that timer if a certain condition is met. I tried to define the timer variable as a global variable but I still get the timer as a undefined on this line:
console.log('else. timer=' + timer);:
else. timer=undefined
<script language="javascript" type="text/javascript">
var timer;
var params={};
params.color='light';
$(document).ready(function () {
timer=createInterval(showSmallWidget, params.color, 500);
});
function createInterval(f, dynamicParameter, interval) {
setInterval(function () {
f(dynamicParameter);
}, interval);
}
function showSmallWidget(color) {
if ($('#widget').html() == '') {
//do stuff
}
else {
console.log('else. timer=' + timer);
if (timer) { console.log('CLEAR TIMER'); timer.clearInterval(); timer = null; }
}
}
</script>
I tried to create a JSFiddle, but I can't get it to work properly: https://jsfiddle.net/puhw3z2k/

There are a couple problems:
1) You have to return the timerID from your createInterval() function:
function createInterval(f, dynamicParameter, interval) {
return setInterval(function () {
f(dynamicParameter);
}, interval);
}
2) clearInterval() works like this clearInterval(timer), not timer.clearInterval().

Javascript: how to set intervals with a variable or run code once?

I have a problem with javascript because I want to run code in a function once until a interval is again over. So I have read about a possibilty to use an boolean to control it but without intervals and it is still calling the updatePosition() function over and over without stopping.
Simplyfied I have code in this structure:
var runPerm = false;
function start() {
setInterval(setPerm, 2000);
setInterval(function() {
new updatePosition()
}, 2000);
}
function setPerm() {
runPerm = true;
}
function updatePosition() {
if (runPerm == true) {
//some code that I want to run once.
runPerm = false;
}
}
Has someone an idea to solve the problem?
(A full code: http://pastebin.com/iSFHjct3 )

Use setTimeout.
var runPerm = false;
function start() {
setInterval(setPerm, 2000);
setTimeout(updatePosition, 2000);
}

How to make clearTimeout() happen within setTimeout()?

I have a setTimeout function already running to make a watch work, but I want to clearTimeout on this already running function when I clock on a button, but only after a few seconds. So ideally, I want a clearTimeout() inside another setTimeout() function, but I can't seem to get it working.
I have this code at the moment:
alarm.click(function() {
water.animate(anim);
setTimeout(function () { clearTimeout(time); }, 3000);
});
var time = setTimeout(function(){ startTime() },1000);
But it does it clears it straight away rather than after 3 seconds. What can I do to make it clear after 3 seconds?
edited my code, still not working :(.

You can try:
var time = setTimeout(function(){startTime(time)},1000);
And in startTime you clear time
function startTime(time) {
cleartTimeout(time);
...
}

You are calling it straight away, but you need a callback.
setTimeout(function () { clearTimeout(time); }, 3000);
function startTime() {
document.getElementById('out').innerHTML += 'starttime<br>';
}
function set() {
document.getElementById('out').innerHTML += 'set<br>';
setTimeout(function () {
document.getElementById('out').innerHTML += 'clear3000<br>';
clearTimeout(time);
}, 3000);
}
var time = setTimeout(function () {
document.getElementById('out').innerHTML += 'clear1000<br>';
startTime();
}, 1000);
set();
<div id="out"></div>

why setTimeout() only run my code once,at first time? [duplicate]

This question already has answers here:
Why is the method executed immediately when I use setTimeout?
(8 answers)
Closed 8 years ago.
i use this javascript code to open two pictures and toggle a vertical menu by clicking on another picture. an know i want to run code without clicking on image, with a timer. so i wrote this code but it run only once at first time.
what's wrong with my code?
<script type="text/javascript">
$(document).ready(function () {
$("#lista2").slideToggle(1);
$curtainopen = false;
$(".rope").click(function () {
$(this).blur();
if ($curtainopen == false) {
var selected = $(this).val();
var image = $(".rope");
image.fadeOut('fast', function () {
$("#largeImg").attr('src', 'images/power-on.png');
image.fadeIn('fast');
});
$(".leftcurtain").stop().animate({ left: '-120px' }, 2000);
$(".rightcurtain").stop().animate({ left: '120px' }, 2000);
$("#R").attr('src', 'images/Right.gif');
$("#L").attr('src', 'images/Left.gif');
$curtainopen = true;
$("#lista2").slideToggle(2000);
$(this).attr('id', '1');
} else {
var selected = $(this).val();
var image = $(".rope");
image.fadeOut('fast', function () {
$("#largeImg").attr('src', 'images/power-off.png');
image.fadeIn('fast');
});
$(".leftcurtain").stop().animate({ left: '0px' }, 2000);
$(".rightcurtain").stop().animate({ left: '0px' }, 2000);
$curtainopen = false;
$("#lista2").hide();
$(this).attr('id', '0');
}
return false;
});
});
function startTimer() {
setTimeout($(".rope").click(), 4000);
}
</script>

use this to execute your code after a specific time interval
setInterval(function() {
$(".rope").click(); // this will execute after every 4 sec.
}, 4000);
use this to execute your code after a specific time delay
setTimeout(function() {
$(".rope").click(); // this will execute after 4 sec delay only once.
}, 4000);
use above according to your requirement

setTimeout need a function, When you are passing $(".rope").click() it is called immediately.
Use it like
function startTimer() {
setTimeout(function () {
$(".rope").click();
}, 4000);
}

setTimeout(function() {
$(".rope").click();
}, 4000);
because setTimeout needs a function, but $(".rope").click() calls itself immediatly (instead of assigning a function to be called). So you don't want to call a function but to pass it to setTimeout.

A timer implies repeating the function after each timeout. setTimeOut only delays a function once (after a given time, in milliseconds).
function startTimer() {
//do your stuff
$(".rope").click();
//repeats itself after 4 seconds
setTimeout(startTimer, 4000);
}
And do not forget to start it on document ready :
$(document).ready(function () {
startTimer();
...
}
I you don't want your function to be called immediately on page load, you can add an initial delay :
$(document).ready(function () {
setTimeout(startTimer, 5000); //the timer will start only 5 seconds after page load
...
}