Delaying CreateJS Animation Timeline - javascript

I'd been using Swiffy to output .fla files pretty easily, but then I was tipped off that the display would alternate "flashing" white over half the project if viewed in Landscape Mode on a iPad. Very strange behavior, which I couldn't replicate on any other device.
So, I've moved on to trying to use CreateJS to fix the issue. I only know enough JS at this time to get by editing code developed by others, so I've been very ineffective so far.
I've gotten this far:
/* js
this.stop();
var t=setTimeout(function(){(this.play())}, 1000);
*/
or
/* js
this.stop();
setTimeout(this.play(), 1000);
*/
I've not been able to get the animation to mind the timeout, and I've tried MANY different variants to try and make some magic happen. All it does is immediately loads the next frame, it doesn't pause at all. Where am I going wrong here?
Here is the original Actionscript:
stop();
var shortTimer:Timer=new Timer(1000);
shortTimer.addEventListener(TimerEvent.TIMER, timerN1);
shortTimer.start();
function timerN1(e:TimerEvent):void{
play();
shortTimer.reset();
}
Any help would be very appreciated, as I've gotten no where on my own trying to fix this is in my off time for several weeks, and my client is becoming increasingly angry. More of a designer, still very uneducated as far as programming is concerned. Again, even a suggestion would be super helpful at this point. Can't seem to crack it.

This syntax is more correct:
/* js
this.stop();
var t=setTimeout(function(){(this.play())}, 1000);
*/
However, you may find that "this" is Window, not the MovieClip that calls it. You can get around this by using a local reference (in this case, its "_this").
/* js
this.stop();
var _this = this;
var t=setTimeout(function(){
console.log(this, _this);
_this.play();
}, 1000);
*/
You can test this by looking at your console, and seeing what the difference between "this" and "_this" is.
Cheers.

Could you possibly post more of the code you are working with? Have you tried using the onAnimationEnd function:
var _this = this;
_this.onAnimationEnd = function() {
_this.stop();
setTimeout(function(){
_this.play();
}, 1000)
}

Try this to keep your scope alive inside your setTimeout function :
sprite.on('animationend', function(event) {
event.target.stop();
setTimeout(animationend.bind(event.target), 1000);
});
function animationend() {
this.gotoAndPlay('run');
}
With the use of .bind() you can pass an object as the scope in the called function. More information here.

Related

body onload setTimeout without reference

At our job we're using a communication portal that logs out after a while. Some of my co-workers asked me for a javascript, that disables the autologout. All i could achieve was to reset the displayes timer, but the timer itself keeps running anyway. Here is how the timer is started:
<body class='asam_body' onLoad='window.setTimeout("DsplTime()",1);' >
As you can see, setTimeout is called at onLoad, but there is no reference to the setTimeout-call, so i can't use the clearTimeout() function. I've also tried to call DsplTime() out of my script, but that still doesn't stop the timer. Everything i found doesn't apply to my case, so i gave up my search after two hours.
Is there any way to influence this serverside body-definition, e.g. by
overriding the onLoad (tried with #document-start)
replacing the string for the definition of the body itself (i guess because the server delivers that, its to late for my script to inject, when the line is there)
getting a reference to the setTiming-Object retroactively
Here's my rather useless approach, that only resets the displayed time:
setInterval(CalcTime, 130000);
setInterval(resetStart, 130000);
setInterval(DsplTime, 130000);
//resetStart and CalcTime are prefined functions,
// without any impact on the timer itself, unfortunately
Thanks in advance!
P.S.: thats the first time i asked something on stackoverflow, so i hope, i asked appropiately:)
Edit:
I tried the brute force approach from Cancel all Javascript's setTimeouts and setIntervals, with
for (var i = 1; i < 99999; i++) {
window.clearInterval(i);
window.clearTimeout(i);
window.mozCancelAnimationFrame(i); // Firefox
}
But still i'm logged out after the same amount of time.
This codesnipped leads to the logout after 1440 minutes:
if (absSec >= 1440)
{
document.location.href = "../project/auth/logout.php";
}
This is part of the function DsplTime() metioned above. Is there any way of manipulating this function, instead of preventing it's call? absSec is out of scope, so i can't change it's value (and i think this wouldn't help anyway?
Edit 2:
So i could manage to stop the timer by
// #run-at document-start
//...
var highestTimeoutId = setTimeout(";");
for (var i = 0 ; i < highestTimeoutId ; i++) {
window.clearTimeout(i);
// window.alert(i);
}
Unfortunately, the script only works every now and then (in like 80% of the pageloading). Plus, isn't this generating a lot of load for the server? I don't want to be blocked...
Why not just override the javascript function DsplTime() so that it doesn't log you out?
go to the debug console and type something like DsplTime = new function(){}
when the interval is up and DsplTime(), the function will do nothing.

Howler js pause/resume trouble

I'm using the Howler js library to set a player in an app running through Electron. First everything seemed to work well, but after a few weeks using the app, a bug occurs repeatedly, but not constantly : the pause() function doesn't work. Here's some piece of code :
Initialization :
var is_paused = true;
var currentTrack = "track1";
var tracks = {"track1" : new Howl({urls: ['path/to/track1.mp3']}),
"track2" : new Howl({urls: ['path/to/track2.mp3']}),
"track3" : new Howl({urls: ['path/to/track3.mp3']})
};
Then I have a few buttons for play/resume, pause, stop, and play a specific track :
$('#playS').click(function(){
if (is_paused){
tracks[currentTrack].play();
is_paused = false;
}
});
$('#pauseS').click(function(){
tracks[currentTrack].pause();
is_paused = true;
});
$('.trackBtn').click(function(){
tracks[currentTrack].stop();
currentTrack = $(this).attr('id');
tracks[currentTrack].play();
is_paused = false;
});
The problem is that sometimes (generally after 40-45 min of a track playing), the pause() function just do nothing, which is really annoying cause I need to pause the track and play another 30 sec file and then resume the current track. I checked the console while the bug occurs, it says absolutely nothing. I have no idea where the bug comes from, there's not a lot of information about how works the library. I really need some help here, thank's in advance.
EDIT : one more thing, when pause() doesn't work, if I click play() the track plays from the begining, and I have control on this second instance of the track. It's like the first instance has reached end, but still playing.
Without knowing what version of Howler you're using, or what other code might be messing things up, there is one thing I think might help: You don't need to track the paused state. The "playing" method takes care of that. I've made it work using something like this:
// If it's paused, it's not playing, so...
paused = !myHowlInstance.playing();
Another thing I noticed is that you have currentTrack = $(this).attr('id'); in your (I think it's a) stop button. Unfortunately I don't know JQuery well enough to know if there's anything wrong with that (I'm more of a Dojo fan myself). But it looks like currentTrack may be set to some value not in your list (which would break tracks[currentTrack]). You might want to go into the console and type tracks["track1"], currentTrack etc. to see their values. You can even do tracks[currentTrack].play(); and see what happens. I wasn't sure if you knew you could do that (it was a huge help to me when I found out about it).
And as far as the "un-pausing" starting from the beginning, I'm currently struggling with it myself; at this time there's no clear way to do this (no resume(), pause(false) etc.), and I've seen a few more questions on the subject on Google and SO, so you're not alone. I've experimented with the seek method, but with no luck. I'll post a comment if/when I reach a breakthrough on that. :)
EDIT: I figured out the play-from-beginning thing. It does involve "seek", and also the whole "instance ID" concept (which I never really understood the importance of from the documentation).
Here's an example from a project I'm working on (also a game); it doesn't involve JQuery (sorry), but it should give you the gist of how to fix the problem.
var myBgMusic = new Howl(...);
var myMusicID = myBgMusic.play(); // The docs say play() returns an ID, and I'll be passing that to "seek" later.
var paused = false;
var saveSeek;
function TogglePause() {
if (paused) {
myBgMusic.play(myMusicID);
myBgMusic.seek(saveSeek, myMusicID);
} else {
myBgMusic.pause();
saveSeek = myBgMusic.seek(myMusicID);
}
};

Set delay or timeout before initializing

I'm working with a script that needs to delay (or have a setTimeout) before any animation loads or initializes, but can't seem to figure out where to put it.
As for delay, if I'm not mistaken, this is used mainly with jquery...So for example: $('id or class here').delay(2000); ...Correct?
As for the setTimeout, if I'm not mistaken, it would be with javascript correct? If so, wouldn't it look something similar to this: setTimeout(function () {function_name},2000); or a slightly different variation of that?
Regardless of these two approaches and trying to add it where I think it should go (using either variations mentioned above), for some reason it just doesn't work right. The console isn't really helping either to check for errors.
In a nutshell, I'm trying to set a delay of 2s (2000ms) before anything starts or initializes.
JS CODE (Where I believe the issue lies):
$(document).ready(function() {
// Additional code here...
// start
BG.init();
// Additional code here...
}
});
Where you have this:
$(document).ready(function() {
Put this:
$(document).ready(function() {
setTimeout(function() {
And then where you have this:
});
// wrapper for background animation functionality
var BG = {
Put this:
}, 2000);
});
// wrapper for background animation functionality
var BG = {
And then, if you don't want to incur the wrath of everyone in the world, indent the stuff inside that new function we just created by one more level. 'Cause indentation is the stuff of life.
There's a lot of 'useless' code for us to help you. Next time share only on a need-to-know bases :)
I've edited your $document.ready block to include the timeout, have a look-see:
$(document).ready(function() {
function initiationProcess() {
// setup logo image
BG.logo = new Image();
BG.logo.onload = function() {
BG.logo_loaded = true;
BG.showLogo();
}
// /../ more code /../
// wire ticker listener
Ticker.addListener(BG.tick);
// start
BG.init();
// /../ more code /../
}
setTimeout(initiationProcess, 2000);
});
Edit:
I'd also like to note that it's considered bad practise (not to mention that it might result in buggy code) to only partly use semicolons in your script file. There's points and counterpoints to using semicolons, but pick a standard and stick to it!

Why does waitForKeyElements() only trigger once despite later changes?

For several years I've used the waitForKeyElements() function to track changes in webpages from a userscript. However, sometimes I've found it doesn't trigger as expected and have worked around out. I've run into another example of this problem, and so am now trying to figure out what the problem is. The following is the barest example I can create.
Given a simple HTML page that looks like this:
<span class="e1">blah</span>
And some Javascript:
// function defined here https://gist.github.com/BrockA/2625891
waitForKeyElements('.e1', handle_e1, false);
function handle_e1(node) {
console.log(node.text());
alert(node.text());
}
setInterval(function() {
$('.e1').text("updated: "+Math.random());
}, 5000);
I would expect this code to trigger an alert() and a console.log() every 5 seconds. However, it only triggers once. Any ideas?
Here's a codepen that demonstrates this.
By design and default, waitForKeyElements processes a node just once. To tell it to keep checking, return true from the callback function.
You'll also want to compare the string (or whatever) to see if it has changed.
So, in this case, handle_e1() would be something like:
function handle_e1 (jNode) {
var newTxt = jNode.text ();
if (typeof this.lastTxt === "undefined" || this.lastTxt !== newTxt) {
console.log (newTxt);
this.lastTxt = newTxt;
}
return true; // Allow repeat firings for this node.
}
With the constant string comparisons though, performance might be an issue if you have a lot of this on one page. In that scenario, switching to a MutationObserver approach might be best.

setTimeout not working on safari mobile

I have a function that shows a menu when clicking on it, and I want it to disappear after 5 seconds. This is my javascript - it works properly on desktop browser but it doesn't disappear on the mobile ones.
$(function() {
$('#prod_btn').click(function() {
$(this).addClass('selected').next('ul').css('display', 'block');
setTimeout(hideMenu, 5000);
});
});
function hideMenu() {
$('#prod_btn').removeClass('selected').next('ul').css('display', 'none');
}
Where is the problem?
Thanks
I've just had the same problem. My code is running great in any browser on my Mac, but on iOs devices it doesn't work.
I use ".bind(this)" on my timeout function and that is what is causing the problem for me.
When I extend the function object with ".bind" in my script it works like a charm.
My code is something like this:
searchTimeout = setTimeout(function() {
...
}.bind(this),250);
For this to work on iOs devices I (like mentioned above) just added this:
Function.prototype.bind = function(parent) {
var f = this;
var args = [];
for (var a = 1; a < arguments.length; a++) {
args[args.length] = arguments[a];
}
var temp = function() {
return f.apply(parent, args);
}
return(temp);
}
I don't see any .bind on your setTimeout, but for others with the same problem this may be the issue. That's why I'm posting :-)
I moved your example to a jsbin, and it's working on my iphone 4.
Please test it out going here from your devices: http://jsbin.com/asihac/5
You can see the code here http://jsbin.com/asihac/5/edit
The example is using jQuery - latest and I only added the required css class.
this doesn't apply to your code, but a common problem with long-running scripts failing on iOS devices is that MobileSafari kills a javascript thread after 10 seconds have elapsed. you should be able to use setTimeout and/or setInterval to work around this, or you can avoid it by making a shortcut to it and thereby running it as an app. see https://discussions.apple.com/thread/2298038, particularly the comments by Dane Harrigan.
Keep in mind also that any setTimeout function is actually likely fire while DOM elements are rendering if the delay is set to a value too short. While that might seem obvious, it can be easily confused with no method firing whatsoever. A good way to test is to have an alert prompt run.
window.onLoad(alert("hey!"));
Then check to see if your function fires after.

Categories