Develop Reference

How to stop a timeout if it is running in javascript

I have a timeout setup like this below:
var someObj = {
init: function() {
someObj.timeout();
someObj.someWork();
},
timeout : setTimeout(function() {
someObj.myFunc();
}, 15000),
myFunc: function() {
console.log('myFunction called');
},
someWork: function(){
console.log('some work');
if(this.timeout !== null){
console.log('clearing timeout...');
clearTimeout(this.timeout);
}
}
}
$(function() {
someObj.init();
});
I want to stop the timeout if it is assigned to timeout variable and not null.
Jsfiddle link: https://jsfiddle.net/jy2p7jtd/17/
Is it possible?
Update:
Is this valid way to assign a timeout and clear it?
var someObj = {
timeout :null,
init: function() {
someObj.make();
someObj.someWork();
},
make: function(){
this.timeout = setTimeout(function() {
console.log('myFunction called');
}, 15000)
},
someWork: function(){
console.log('timeout is ', this.timeout);
if(this.timeout !== null){
console.log('clearing timeout...');
clearTimeout(this.timeout);
}
}
}
$(function() {
someObj.init();
});
updated link: https://jsfiddle.net/jy2p7jtd/41/

declare another property timeoutId:null and check if it is present then clear it.
var someObj = {
timeoutId: null,
init: function() {
this.timeoutId = this.timeout();
someObj.someWork();
},
timeout: function() {
return setTimeout(function() {
someObj.myFunc();
}, 15000)
},
myFunc: function() {
console.log('myFunction called');
},
someWork: function() {
console.log('some work');
if (this.timeoutId) {
console.log('clearing timeout...');
clearTimeout(this.timeoutId);
}
}
}
$(function() {
someObj.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

clearTimeout() prevents the function set with the setTimeout() to execute.

How to use callback to chain animations with JavaScript

I would like to chain three animations with JavaScript and Transit.js. The second one must be launched after the first is complete. For this I'm trying to use callbacks.
It's important for me to separate these three functions. I don't want to nest them.
// fn 1
function one(callback) {
$(body).transition({
'opacity': '1'
}, 500, function(){
callback;
console.log('callback one');
});
}
// fn 2
function two(callback) {
$('section').transition({
'opacity':'1',
}, 500, function(){
console.log('callback two');
callback;
});
}
// fn 3
function three(callback) {
$('aside').transition({
'opacity':'1',
}, 500, function(){
console.log('callback three');
callback;
});
}
I start functions like this:
one(two(tree()));
The problem is, the second function starts before the first is completed. What is wrong with this script?

Wrap your callback function in setTimeout function
function one(callback) {
$(body).transition({
'opacity': '1'
}, 500, function(){
setTimeout(function(){
callback();
console.log('callback one');
},0);
});
}
// fn 2
function two(callback) {
$('section').transition({
'opacity':'1',
}, 500, function(){
setTimeout(function(){
callback();
console.log('callback two');
},0);
});
}
// fn 3
function three(callback) {
$('aside').transition({
'opacity':'1',
}, 500, function(){
setTimeout(function(){
callback();
console.log('callback three');
},0);
});
}

try this, it should work as you expected.
// fn 3
function three() {
$('aside').transition({
'opacity':'1',
}, 500, function(){
console.log('callback three');
});
}
// fn 2
function two() {
$('section').transition({
'opacity':'1',
}, 500, three);
}
// fn 1
function one() {
$(body).transition({
'opacity': '1'
}, 500, two);
}
one();//invoke fn1

You need to pass the reference of the function as the argument instead of passing the executed result.
// this would execute the function `three` and pass the
// returned value as the argumnet to function `two`
// after executing `two` the returned value would pass to
// function function `one` . Since any none of the function is
// returning anything the argument value would be `undefined`
one(two(tree()));
The better way to make it cyclic is adding the callback as the function reference.
function one() {
$(body).transition({
'opacity': '1'
}, 500, two);
}
// fn 2
function two() {
$('section').transition({
'opacity':'1',
}, 500, three);
}
// fn 3
function three() {
$('aside').transition({
'opacity':'1',
// if you don't want to make it cyclic then remove the
// callback argument `one`
}, 500, one);
}
UPDATE : If you wanna pass it as an argument then pass the reference as a callback function and within the callback call the function you want.
function one(callback) {
$(body).transition({
'opacity': '1'
}, 500, function(){ calback() });
// or simply
// }, 500, calback);
}
// fn 2
function two(callback) {
$('section').transition({
'opacity':'1',
}, 500, , function(){ calback() });
}
// fn 3
function three(callback) {
$('aside').transition({
'opacity':'1',
}, 500, , function(){ calback() });
}
// use nested callbacks as you want
one(function(){ two(function(){ three(function(){}); }); })

jQuery deferred - when multiple timeout tasks have completed

Having a few teething problems with $.deferred, $.when and $.done.
I'm calling a method which has a couple of tasks inside on a timer. I'm looking at getting a callback when everything inside this method has completed, including the stuff in timers, so started looking at $.when() and $.done() to achieve this.
The problem I am getting is the function is firing before the tasks have completed, immediately as the method is called. So, I started playing with $.deferred and resolve(), but haven't managed to get anything working. Without the timers, I can do it.
This is where I call the method:
$.when(cover.start()).done(function() {
console.log("Cover has started.");
});
This is the entire method:
return {
other: function() {},
start: function() {
var dfd = $.Deferred();
el.filter.animate({
"opacity": "0.6", "filter": "alpha(opacity=60)"
}, 2000, "easeInOutCirc", function() {
el.share.removeClass('fa-spin');
setTimeout(function() {
el.share.removeClass('fa-cog').addClass('fa-bars');
},1000);
setTimeout(function() {
el.scroll.animate({
"opacity": "1",
"bottom": "40px"
}, 1200, "easeOutBounce", function() {
var pulseOptions = { opacity: "0" };
setTimeout(function() {
el.scroll.pulse(pulseOptions, {
duration : 400,
pulses: 3,
interval: 500,
returnDelay: 800
});
}, 2000);
dfd.resolve();
});
}, 2000);
return dfd.promise();
});
}
} // end return
As you can see, after my original attempt failed, I added dfd.resolve() to where I want the callback and tried to return the promise. However, the function still fires too early. Where am I going wrong?

The problem is, you need to return promise from the start method
return {
other: function () {},
start: function () {
var dfd = $.Deferred();
el.filter.animate({
"opacity": "0.6",
"filter": "alpha(opacity=60)"
}, 2000, "easeInOutCirc", function () {
el.share.removeClass('fa-spin');
setTimeout(function () {
el.share.removeClass('fa-cog').addClass('fa-bars');
}, 1000);
setTimeout(function () {
el.scroll.animate({
"opacity": "1",
"bottom": "40px"
}, 1200, "easeOutBounce", function () {
var pulseOptions = {
opacity: "0"
};
setTimeout(function () {
el.scroll.pulse(pulseOptions, {
duration: 400,
pulses: 3,
interval: 500,
returnDelay: 800
});
}, 2000);
dfd.resolve();
});
}, 2000);
});
//need to return from start
return dfd.promise();
}
} // end return

Not fishing to steal APJ's rep' but out of interest, you could avoid callback hell by exploiting .delay() and .promise(), both of which relate to the default "fx" animation queue.
Something along the following lines would fix the problem, and would be more readable :
//animation maps
var maps = [];
maps[0] = { 'opacity':0.6, 'filter':'alpha(opacity=60)' };
maps[1] = { 'opacity':1, 'bottom':'40px' };
maps[2] = { 'opacity':0 };
maps[3] = { 'duration':400, 'pulses':3, 'interval':500, 'returnDelay':800 };
//animation functions
var f = [];
f[0] = function () {
return el.filter.animate(maps[0], 2000, "easeInOutCirc").promise();
};
f[1] = function () {
return el.share.removeClass('fa-spin').delay(1000).promise();
};
f[2] = function () {
return el.share.removeClass('fa-cog').addClass('fa-bars').delay(1000).promise();
};
f[3] = function () {
el.scroll.animate(maps[1], 1200, "easeOutBounce").promise();
}
f[4] = function () {
return el.scroll.delay(2000).promise();//delay() could be called on any element. `el.scroll` is arbitrary.
};
f[5] = function () {
el.scroll.pulse(maps[2], maps[3]);
};
return {
other: function () {},
start: function () {
//animation sequence
var p = f[0]().then(f[1]).then(f[2]).then(f[3]);
p.then(f[4]).then(f[5]);
return p;//<<<< and here's the all important return
}
}
Not sure this is 100% correct - might need some work.
It's worth noting that there are performance pros and cons with this approach :
Pros: Reusable animation maps; Reusable functions;
Cons: More liberal use of promises will cause a larger memory spike.

clear/set interval on hover jquery

I am togglefading two iframes and want it to stop fading on hover. The following code is not clearing the interval.
function mapfade(){
$('#earth').fadeIn(1000).delay(3000).fadeOut(1000).delay(3000).fadeIn(1500);}
var fadestop=setInterval(function(){ mapfade () }, 3000);
$('iframe').hover(
function() {
clearInterval(fadestop);
}, function() {
fadestop=setInterval(function(){ mapfade () }, 2000);
}
);
Help is much appreciated!
Changed glaring error in code to
function mapfade(){
$('#earth').fadeToggle(2000)}
var fadestop=setInterval(function(){ mapfade () }, 3000);
$('iframe').hover(
function() {
clearInterval(fadestop);
}, function() {
fadestop=setInterval(function(){ mapfade () }, 3000);
}
);

how to wait the execution of line in Javascript?

$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300);
// Here I want wait that the div_id can complete its shake
alert('hello');
}
.delay I tried but it is not working.

$(this).effect("shake", { times:3 }, 300, function() {
// this will alert once the animation has completed
alert('hello');
});

If you're using jQuery UI, you should just be able to add a callback as the 4th parameter.
See: http://jqueryui.com/demos/effect/
$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300, function(){
alert('hello');
});
}

$(this).effect("shake", { times:3 }, 300, function() {
alert('hello');
});