Develop Reference

Call JavaScript function after 1 second One Time

I have successfully managed to make a div hide on click after 400 milliseconds using a setInterval function. My issue is that it runs continually, I only need the function to execute once. After a quick search I discovered that the setInterval can be stopped by clearInterval. Am I using this incorrectly? The closeAnimation function is being executed on click. I modelled my code after the code on this page: http://www.w3schools.com/jsref/met_win_setinterval.asp
function closeAnimation() {
setInterval(function(){hide()}, 400);
clearInterval(stopAnimation);
}
var stopAnimation = setInterval({hide()}, 400);

If it needs to run just once you can use setTimeout
setTimeout(function () {
console.log('Hello world')
}, 1000)
setTimeout(() => {
console.log('Foo bar')
}, 1000)

You should use setTimeout():
setTimeout(function() {
getScore();
getResult();
}, 1800000);
The '1800000' is the time in milliseconds after which you want this function to execute. In this case, 30 minutes.

Jquery ajax post with timer event?

script
$(document).ready(function () {
var meter_id = $("#MeterReadingTypes li a.link_active").attr("id");
var range_id = $("#DateRangeTypes li a.link_active").attr("id");
window.setInterval(PostMainChartValues(meter_id, range_id), 5000);
...
});
function PostMainChartValues(meter_id, range_type_id) {
$.ajax({
...
});
}
window.setInterval is not trigerred. If I write an alert in setInterval it works. What is the reason of this? Why function is not triggering? I tracked it with chrome DevTools, and there is no move.

The first parameter to setInterval should be a function (or an evalable string). Right now, you are calling PostMainChartValues() and passing its return value to setInterval().
Change it to:
window.setInterval(function() {
PostMainChartValues(meter_id, range_id);
}, 5000);

This is not an ajax issue. You are using in wrong mode the setInterval parameter.
Create an anonymous function like bellow:
window.setInterval(function () { PostMainChartValues(meter_id, range_id); }, 5000);

ClearTimeout dose not work well (may be when clearing before the first timer fire)

I wanted to add a "loading" class to the body element on every ajax call that takes more than 300ms.
so I added the following script to my common.js file:
$(document).ready(function ()
{
var timer;
$("body").on({
ajaxStart: function ()
{
var body = $(this)
var timer = setTimeout(function ()
{
body.addClass("loading");
}, 300)
},
ajaxStop: function ()
{
$(this).removeClass("loading");
clearTimeout(timer);
}
});
});
Now this works if i make the ajax calls at leas 1sec long.
When they are immediate the loading class remains on the body element.
I suspect that the first the ajax call ends before 300ms expires that calls for removing the class and clearing the timer, lets say this takes 10ms, but then the timer the fires after 290ms more...
I wonder how could i test for that?
and weather I'm doing something wrong to achieve the described above task.
P.S
I'm using ASP.NET MVC.

You're redeclaring the variable, loosing the higher scope of the previously declared variable:
$(document).ready(function () {
var timer;
$(document).on({
ajaxStart: function () {
var body = $(document.body);
timer = setTimeout(function () { //don't use the "var" keyword
body.addClass("loading");
}, 300)
},
ajaxStop: function () {
clearTimeout(timer);
$(this).removeClass("loading");
}
});
});

clearTimeout() outside of function not working properly

I have this line of code, but it doesn't work, and I'm guessing that my function is the cause of the problem here. Here's my JavaScript:
$(document).ready(function () {
var interval;
function move(ele) {
$(ele).animate({
'background-position-y': '0px'
}, 200, function () {
$(ele).animate({
'background-position-y': '3px'
}, 200, function () {
interval = setTimeout(function () {
move(ele)
}, 3);
});
});
};
$(".up").hover(function () {
move(this), function () {
clearTimeout(interval);
interval = null;
$(this).css("background-position", "80px 3px ");
};
});
Can someone explain me what I'm doing wrong here?

Even with the proper closing braces as suggested by David there is still a problem which keeps the animation going. Clearing the timer (interval) doesn't stop the callback functions passed to .animate() from executing. So interval = setTimeout(...) will still get executed and perpetuated the animation cycle.
I reworked the code a bit for a working example, though there could be some improvements (like getting rid of a global variable). http://jsfiddle.net/aKKRk/

err, it looks like your actual problem is that you're only passing one function to hover, not two. You've got ….hover(function() { move(…), function() { … } }) instead of ….hover(function() { move(…); }, function() { … }).
In the future, this kind of error will be much easier to spot if you make a habit of consistently indenting your code.

jQuery/JS infinite timed loop

I am trying to create a series of clicks on different elements on screen at different times. I can easily do this using the setTimeout function, but I need to make this an infinite loop!?
Here is a snippet of how I am currently handling the code.
setTimeout(function () {jQuery('.CR_1').trigger('click');}, 1000);
setTimeout(function () {jQuery('.CR_1').trigger('click');}, 5000);
setTimeout(function () {jQuery('.CR_2').trigger('click');}, 5500);
Any ideas on how I can make this work?
EDIT: Let me a little more clear. I am trying to run the set of functions in the same order over and over. The setInterval worked perfectly. I am super sorry for any confusion.
setInterval ( "flips ()", 12000 );
function flips (){
setTimeout(function () {jQuery('.CR_1').trigger('click');}, 1000);
setTimeout(function () {jQuery('.CR_1').trigger('click');}, 5000);
setTimeout(function () {jQuery('.CR_2').trigger('click');}, 5500);
}

Just call setTimeout from within your function.
setTimeout(callMe, 1000);
function callMe() {
jQuery('.CR_1').trigger('click');
setTimeout(callMe, 1000);
}
You could also use setInterval but I prefer doing it this way because it will be called 1000ms from the last run, not every 1000ms regardless of how long it takes to run (if the process is synchronous).

clicky()
function clicky() {
setTimeout(function () {jQuery('.CR_1').trigger('click');}, 1000);
setTimeout(function () {jQuery('.CR_1').trigger('click');}, 5000);
setTimeout(function () {jQuery('.CR_2').trigger('click');clicky()}, 5500);
}

i think you should use setInterval instead of setTimeout

Why not use setInterval instead?

var delayedFunctions = [
[1000,function(){ ... }],
[5000,function(){ ... }],
[5500,function(){ ... }]
];
var fIndex = 0;
function runDelayedFunctions(){
var details = delayedFunctions[fIndex];
setTimeout( function(){
details[1].call(this);
if (++fIndex >= delayedFunctions.length) fIndex=0;
runDelayedFunctions();
}, details[0] );
};
runDelayedFunctions();