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.
Related
I have a spawn function which performs some task. Before the function returns, I would like to delay some another function call.
I tried using time.addEvent but with no luck as it does not seem to work within the spawn function. However the timer works perfectly inside the create function.
My code so far:
create(){
newMethod = spawn.bind(this);
newMethod();
}
function spawn(){
//do stuff
timer = this.time.addEvent({
delay: 3000,
callback: functionDelay,
loop: false
});
}
function functionDelay(){
console.log("Works!");
}
var delayText;
var delayedEvent;
class myScene extends Phaser.Scene {
constructor (config)
{
super(config);
}
preload ()
{
this.load.image('dude', 'sprites/phaser-dude.png')
}
create ()
{
delayText = this.add.text(50, 50);
delayedEvent = this.time.delayedCall(3000, this.spawn, [], this);
}
spawn()
{
var sprite = this.add.sprite(300, 50, 'dude')
}
update()
{
delayText.setText('Event.progress: ' + delayedEvent.getProgress().toString().substr(0, 4));
}
}
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
loader: {
baseURL: 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets#v2.0.0/assets/',
crossOrigin: 'anonymous'
},
width: 800,
height: 600
};
var game = new Phaser.Game(config);
game.scene.add('myScene', myScene, true);
<script src="//cdn.jsdelivr.net/npm/phaser#3.17.0/dist/phaser.min.js"></script>
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.
var board = new DepartureBoard(document.getElementById('test'), {
rowCount: 1,
letterCount: 13
});
window.setTimeout(function() {
board.setValue(['VISA SERVICES', ]);
}, 0)
window.setTimeout(function() {
board.setValue(['POE CLEARENCE', ]);
}, 8000);
window.setTimeout(function() {
board.setValue(['STAMPING', ]);
}, 16000);
window.setTimeout(function() {
board.setValue(['ATTESTATION', ]);
}, 24000);
window.setTimeout(function() {
board.setValue(['INSURANCE', ]);
}, 32000);
window.setTimeout(function() {
board.setValue(['FOREX', ]);
}, 40000);
https://codepen.io/Mtn_Wolf/pen/LKsvz
I am trying like the Airport departure but i can't able to looping the value after the last value displayed in my website to show services how i can loop the value after the last content displayed
Using direct timeouts in modern ECMAScript is not good pattern, not just because "modern approach", but because better chaining and error handling
function delay(time) { return new Promise(resolve => setTimeout(resolve, time) }
function worker() {
return Promise.resolve()
.then(() => board.setValue(['VISA SERVICES']))
.then(() => delay(1000))
// and so on
.then(worker);
}
worker().catch((error) => {
// Error handling here
})
Basically you could use an outer interval, which length is the complete period and inside call the smaller timeout for the next actions.
function startInterval() {
window.setTimeout(function() { board.setValue(['VISA SERVICES']); }, 0)
window.setTimeout(function() { board.setValue(['POE CLEARENCE' ]); }, 8000);
window.setTimeout(function() { board.setValue(['STAMPING']); }, 16000);
window.setTimeout(function() { board.setValue(['ATTESTATION']); }, 24000);
window.setTimeout(function() { board.setValue(['INSURANCE']); }, 32000);
window.setTimeout(function() { board.setValue(['FOREX']); }, 40000);
}
startInterval();
setInterval(startInterval, 48000); // use the length of the period
There are many ways you could accomplish this, here's my suggestion, which basically keeps your current code intact -
Put all of your calls to window.setTimeout() in a function - at the end, add one more call to window.setTimeout() that just calls the function, which will start it again. Something like...
var board = new DepartureBoard(document.getElementById('test'), { rowCount: 1, letterCount: 13 });
var myFunction = function(){
window.setTimeout(function() {
board.setValue(['VISA SERVICES', ]);
}, 0)
window.setTimeout(function() {
board.setValue(['POE CLEARENCE', ]);
}, 8000);
window.setTimeout(function() {
board.setValue(['STAMPING', ]);
}, 16000);
window.setTimeout(function() {
board.setValue(['ATTESTATION', ]);
}, 24000);
window.setTimeout(function() {
board.setValue(['INSURANCE', ]);
}, 32000);
window.setTimeout(function() {
board.setValue(['FOREX', ]);
}, 40000);
window.setTimeout(function() {
myFunction(); // call it again here, and the process will start over
}, 50000);
}
myFunction(); // don't forget - now that all of the window.setTimeout calls are wrapped in a function, the process won't start unless you call the function here, setting off the loop
I am trying to pass an argument down the tree to the successResponse errorResponse functions and display the value in the console before I do any work with it.
Currently I am getting an empty value in the console so there must be something missing in my code. I am thinking its a return statement but when I attempt this I get no result.
Any help would be greatly appreciated.
The console.log is below.
successResponse: function (getSel) {
requestResponses.errorCode = false;
requestResponses.redLight.removeClass(requestResponses.redBright);
requestResponses.greenLight.addClass(requestResponses.greenBright);
console.log(getSel);
},
Here is the full version of my code
var requestResponses = {
greenLight: $('.cp_trafficLight_Light--greenDimmed'),
redLight: $('.cp_trafficLight_Light--redDimmed'),
greenBright: 'cp_trafficLight_Light--greenBright',
redBright: 'cp_trafficLight_Light--redBright',
settings: {
flashError: 400,
requestTime: 10000
},
init: function (url, getSel) {
requestResponses.url = url;
requestResponses.getResponse(requestResponses.url, getSel);
setInterval(function () {
if (requestResponses.errorCode === true) {
requestResponses.redLight.toggleClass(requestResponses.redBright);
}
}, requestResponses.settings.flashError);
},
successResponse: function (getSel) {
requestResponses.errorCode = false;
requestResponses.redLight.removeClass(requestResponses.redBright);
requestResponses.greenLight.addClass(requestResponses.greenBright);
console.log(getSel);
},
errorResponse: function () {
requestResponses.greenLight.removeClass(requestResponses.greenBright);
},
getResponse: function (serverURL, getSel) {
$.ajax(serverURL, {
success: function (getSel) {
requestResponses.errorCode = false;
requestResponses.successResponse(getSel);
},
error: function () {
requestResponses.errorCode = true;
requestResponses.errorResponse();
},
complete: function () {
setTimeout(function () {
requestResponses.getResponse(requestResponses.url);
}, requestResponses.settings.requestTime);
}
});
},
errorCode: false
}
requestResponses.init('/status');
Appreciate any help.
Your code looks fine. Make sure that the server actually responds with data. The problem is most likely on back-end.
I have the following animations in my web page:
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
$(this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
Currently both the animations are running simultaneously. I want the second animation to run after the first one. I tried putting the second one inside the callback function, but cannot find a way to get the $(this) reference working. Any idea how to get this working?
Thanks in advance.
Your function is wrong, if you are declaring options, then the callback goes in the options object:
$(".anim-item").animate({
opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
$(this).animate({
left: 200,
}, { queue: true, duration: 1000, complete: function() {
// Animation complete.
}});
}});
Also, don't make a global variable containing the item, that's just asking for trouble, especially as jquery will maintain it for you in this instance, if you need to declare a new variable for the object in chaining, generally you are not doing it right ;)
Two ways:
cache this in a local variable before calling .animate()
use .proxy() to pass your this reference to .animate()
example 1:
var func = function(){
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
self.animate({});
});
};
example 2:
var func = function(){
$.proxy($(".anim-item").not(this).animate({
}), this);
};
Save it under a different name, like this:
var myThis = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(myThis).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});
The closure of the inner function will make sure it's visible.
Make an alias for this via
var _this = this;
If you write a jQuery query $('.abc') and use functions like click, hover etc, this will always reference to current DOM node jQuery is processing.
Store this in a local variable.
var _this = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete. Next animation
$(_this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
}
);
In a jQuery callback function this is always set to the DOM element that the function applies to.
If you want access to this in your first callback function you'll have to create a reference to it before you animate:
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(self).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});