I have a html5 video event listener that is supposed to wait until the correct time and then pause the video while the user takes part in a quiz. The first 'lesson' works fine, and the second video also appears to add the listener with the correct time to pause. But upon playing the second video it always pauses at 170 seconds, the pause time from the FIRST video.
Also, when I check Chrome's dev panel it actually shows timeCache as having immediately reverted back to the previous videos values as soon as the video is played; unless the video has passed the 170 mark, then it will use the 230 second timeCache value as it should. At first I thought it was because the old event listener was still attached, but I have eliminated that possibility and the problem still persists. Here is the link http://koreanwordgame.com/grammar/
var setPause = function (time) {
var video = $("video").get(0);
var timeCache = time;
video.removeEventListener('timeupdate', timeListener, false);
function timeListener (){
if (video.currentTime >= timeCache && video.currentTime < (timeCache + 0.3)) {
video.pause();
}}
video.addEventListener('timeupdate', timeListener);
};
the first $watch in the directive is triggered each time a new lesson is loaded, it binds the ended event as well as the timeupdate listener via setPause() and then loads and plays the video. The idea is that setPause sets the time that the video will automatically pause at when it reaches, and then the second $watch waits until all the questions have been answered before playing the remainder of the video (generally a congratulations message)
app.directive('videoWatcher', function () {
return function (scope, video, attrs) {
scope.$watch(attrs.videoLoader, function () {
$(video[0]).bind('ended', function () {
$(this).unbind('ended');
if (!this.ended) {
return;
}
scope.tutorialNumber++;
scope.$apply();
scope.loadFromMenu();
});
setPause(scope.currentTutorial.pause);
video[0].load();
video[0].play();
});
scope.$watch(attrs.congrats, function(){
var cT = scope.currentTutorial;
if (scope.questionNumber === cT.material.length){
video[0].play();
setTimeout(function () {
video[0].play();
}, 500);
}
});
};
})
Every time you call your pause function, you create a new instance of the timeListener function. Any reference to timeListener is a reference to the one you just created. So when you're removing the event listener, you're removing the new function, not the one you attached before.
In Javascript, within a given function, it doesn't matter where you declare variables and functions; they are always "hoisted" to the top. So even though you write the timeListener function after your call to removeEventListener, your code behaves as though you declared it at the top of pause. This is why it's usually a good idea to declare all your variables and functions before running any other code (and JSLint will give you a hard time if you don't). The exception is when you explicitly assign a function to a variable.
You can fix this by declaring timeListener outside of pause, so it will always be a reference to the previous instance. Like this:
var timeListener;
function pause(time) {
//timeCache is unnecessary
var video = $("video").get(0),
end = time + 0.3; //cache this so you don't have to add every time
if (timeListener) {
//remove previous timeListener function, if there is one
video.removeEventListener('timeupdate', timeListener, false);
}
//make a new function and save it for later as timeListener
timeListener = function () {
if (video.currentTime >= time && video.currentTime < end) {
video.pause();
}
};
video.addEventListener('timeupdate', timeListener);
};
Related
I am trying to get a function to fire on mouseover of an element. However, if the function is already running I want it to not fire.
I have this for the mouseover trigger
onmouseover="runFunc()">
and I have this for the js:
var timerStarted = false;
function waitToStart() {
timerStarted = false;
}
function runFunc() {
if (!timerStarted) {
console.log('run function');
}
timerStarted = true;
setTimeout(waitToStart, 6000);
}
When I first hover over the element, I get
run function
and nothing happens for 6 seconds which seemed like it was working. However after 6 seconds the console output counted fast up to the amount of times I hovered over the function:
(24) run function
I'm struggling to understand why and how to make sure that the function only fires every 6 seconds after mouseover.
You're starting many timers. And eventually they all end and each set your boolean to false, even when in the half second before that you still started yet another timer.
What you really want is to either cancel any previously launched timer before issuing a new one, or to only launch a new one when you are sure the preceding one already timed out. The effect is a bit different: the first solution will reset the countdown with every mousemove (so must hold it still for at least 6 seconds), while the second will just make sure that there are at least 6 seconds between executions of the if block.
Here is how the second approach works:
var timerStarted = false;
function waitToStart() {
timerStarted = false;
}
function runFunc() {
if (!timerStarted) {
console.log('run function');
timerStarted = true; // <--- moved inside the IF block
setTimeout(waitToStart, 6000); //
}
}
I have a jQuery Mobile web app which targets iOS and Android devices. A component of the application is a background task, which periodically checks for a.) changes to local data and b.) connectivity to the server. If both are true, the task pushes the changes.
I'm using a simple setTimeout()-based function to execute this task. Each failure or success condition calls setTimeout() on the background task, ensuring that it runs on 30 second intervals. I update a status div with the timestamp of the last task runtime for debugging purposes.
In any desktop browser, this works just fine; however, on iOS or Android, after some period of time, the task stops executing. I'm wondering if this is related to the power conservation settings of the devices--when iOS enters stand-by, does it terminate JavaScript execution? That is what appears to happen.
If so, what is the best way to resume? Is there an on-wake event which I can hook into? If not, what other options are there which don't involve hooking into events dependent on user interaction (I don't want to bind the entire page to a click event just to restart the background task).
Looks like Javascript execution is paused on MobileSafari when the browser page isn't focused. It also seems if setInterval() events are late, they are simply fired as soon as the browser is focused. This means we should be able to keep a setInterval() running, and assume the browser lost/regained focus if the setInterval function took much longer than usual.
This code alerts after switching back from a browser tab, after switching back from another app, and after resuming from sleep. If you set your threshold a bit longer than your setTimeout(), you can assume your timeout wouldn't finish if this fires.
If you wanted to stay on the safe side: you could save your timeout ID (returned by setTimeout) and set this to a shorter threshold than your timeout, then run clearTimeout() and setTimeout() again if this fires.
<script type="text/javascript">
var lastCheck = 0;
function sleepCheck() {
var now = new Date().getTime();
var diff = now - lastCheck;
if (diff > 3000) {
alert('took ' + diff + 'ms');
}
lastCheck = now;
}
window.onload = function() {
lastCheck = new Date().getTime();
setInterval(sleepCheck, 1000);
}
</script>
Edit: It appears this can sometimes trigger more than once in a row on resume, so you'd need to handle that somehow. (After letting my android browser sleep all night, it woke up to two alert()s. I bet Javascript got resumed at some arbitrary time before fully sleeping.)
I tested on Android 2.2 and the latest iOS - they both alert as soon as you resume from sleep.
When the user switches to another app or the screen sleeps, timers seem to pause until the user switches back to the app (or when the screen awakens).
Phonegap has a resume event you can listen to instead of polling for state (as well as a pause event if you want to do things before it is out of focus). You start listening to it after deviceReady fires.
document.addEventListener("deviceready", function () {
// do something when the app awakens
document.addEventListener('resume', function () {
// re-create a timer.
// ...
}, false);
}, false);
I use angular with phonegap and I have a service implemented that manages a certain timeout for me but basically you could create an object that sets the timer, cancels the timer and most importantly, updates the timer (update is what is called during the 'resume' event).
In angular I have a scopes and root scope that I can attach data to, my timeout is global so I attach it to root scope but for the purpose of this example, I'll simply attach it to the document object. I don't condone that because you need should apply it to some sort of scope or namespace.
var timeoutManager = function () {
return {
setTimer: function (expiresMsecs) {
document.timerData = {
timerId: setTimeout(function () {
timeoutCallback();
},
expiresMsecs),
totalDurationMsecs: expiresMsecs,
expirationDate: new Date(Date.now() += expiresMsecs)
};
},
updateTimer: function () {
if (document.timerData) {
//
// Calculate the msecs remaining so it can be used to set a new timer.
//
var timerMsecs = document.timerData.expirationDate - new Date();
//
// Kill the previous timer because a new one needs to be set or the callback
// needs to be fired.
//
this.cancelTimer();
if (timerMsecs > 0) {
this.setTimer(timerMsecs);
} else {
timeoutCallback();
}
}
},
cancelTimer: function () {
if (document.timerData && document.timerData.timerId) {
clearTimeout(document.timerData.timerId);
document.timerData = null;
}
}
};
};
You could have the manager function take a millisecond parameter instead of passing it into set, but again this is modeled somewhat after the angular service I wrote. The operations should be clear and concise enough to do something with them and add them to your own app.
var timeoutCallback = function () { console.log('timer fired!'); };
var manager = timeoutManager();
manager.setTimer(20000);
You will want to update the timer once you get the resume event in your event listener, like so:
// do something when the app awakens
document.addEventListener('resume', function () {
var manager = timeoutManager();
manager.updateTimer();
}, false);
The timeout manager also has cancelTimer() which can be used to kill the timer at any time.
You can use this class github.com/mustafah/background-timer based on #jlafay answer , where you can use as follow:
coffeescript
timer = new BackgroundTimer 10 * 1000, ->
# This callback will be called after 10 seconds
console.log 'finished'
timer.enableTicking 1000, (remaining) ->
# This callback will get called every second (1000 millisecond) till the timer ends
console.log remaining
timer.start()
javascript
timer = new BackgroundTimer(10 * 1000, function() {
// This callback will be called after 10 seconds
console.log("finished");
});
timer.enableTicking(1000, function(remaining) {
// This callback will get called every second (1000 millisecond) till the timer ends
console.log(remaining);
});
timer.start();
Hope it helps, Thank you ...
You should use the Page Visibility API (MDN) which is supported just about everywhere. It can detect if a page or tab has become visible again and you can then resume your timeouts or carry out some actions.
I'm currently building a Tron canvas game based on this code.
it works kinda good, but if I restart the game, two values are getting passed via e.which.
Try to show main code:
function loadGame() {
var e;
document.onkeydown=function(event){e=event};
function intervall() {
function check() {
//Function for drawing Tron
}
var key = e.which;
if(key == 87) { //W and so one
check();
}
}
var timer = setInterval(intervall,900)
}
If I lose, and call loadGame() again, it works great.
It does not if I call loadGame() while Game is still running.
I uploaded a live demo here:
http://wernersbacher.de/tron.html
Thanks for any help!
You're getting two values because when you restart the game, the old interval loop is still running when you start a new one.
I see you're trying to stop the old loop here:
if(hard) {
clearInterval(timer);
}
However, because the variable 'timer' was declared in a different invocation of the loadGame function, this newly invoked loadGame function has no access to it.
You can see this in action by logging the variable to the console from the new loadGame invocation:
function loadGame(hard) {
if(hard) {
console.log(timer);
}
You'll see it returns undefined.
If any of this sounds confusing to you, you might want to learn more about Function scope.
A solution is to declare the 'time' variable outside the loadGame function, in the global scope:
var time;
function loadGame(hard) {
/* the rest of your code */
timer = setInterval(intervall,9)
}
That way, the new instance of the loadGame function which is called when you press the 'Load game' button has access to the old timer and can stop it before starting a new one.
Incidentally, completely reloading everything, including creating a new canvas element and destroying the old one, seems a bit unnecessary. Why not simply clear() the canvas and reset the player position to the start position? You don't even need to restart the timer using that method.
I always run into this problem and seem to implement a nasty looking solution.
It seems like a common design pattern to fire an action immediately, but not let that action queue up if clicked rapidly / delay firing if previously called within a timeframe. In my real world example, I have an AJAX call being made, so if I don't prevent repetitive actions the browser queues requests.
How would you implement this differently? What other options are there?
function myFunction() {
console.log("fired");
}
var timeout = null;
$("#foo").click(function() {
// if not previously clicked within 1 second, fire immediately
if (!timeout) {
myFunction();
timeout = setTimeout(function() {
timeout = null;
}, 1000);
} else {
// clicked again within 1s
clearTimeout(timeout); // clear it - we can't have multiple timeouts
timeout = setTimeout(function() {
myFunction();
timeout = null;
}, 1000);
};
});
With your current code, if you repeatedly click "#foo" at an interval slightly less than one second, say every 800ms, on first click it will fire the function immediately (obviously), but then it will fire the function exactly once more one second after the last click. That is, if you click ten times at 800ms intervals the function will fire once immediately and a second time approximately 8 seconds (800ms * 9 + 1000ms) after the first click.
I think you're better off removing the else case altogether, so that on click it will fire the function if it has not been called within the last second, otherwise it will do nothing with no attempt to queue another call up for later. Not only does that seem to me like a more logical way to operate, it halves the size of your function...
On the other hand, since you mentioned Ajax, rather than disabling the function based on a timer you may like to disable the function until the last Ajax request returns, i.e., use a flag similar to your timerid and reset it within an Ajax complete callback (noting that Ajax complete callbacks get called after success or failure of the request).
In the case of an auto-complete or auto-search function, where you want to send an Ajax request as the user types, you might want to remove the if case from your existing code and keep the else case, because for auto-complete you likely want to wait until after the user stops typing before sending the request - for that purpose I'd probably go with a shorter delay though, say 400 or 500ms.
Regarding general structure of the code, if I wanted a function to be fired a maximum of once per second I'd likely put that control into the function itself rather than in a click handler:
var myFunction = function() {
var timerid = null;
return function() {
if (timerid) return;
timerid = setTimeout(function(){ timerid=null; }, 1000);
// actual work of the function to be done here
console.log("myFunction fired");
};
}();
$("#foo").click(function() {
myFunction();
});
The immediately invoked anonymous function that I've added makes it uglier, but it keeps the timerid variable out of the global scope. If you don't like that obviously you could simply declare timerid in the same scope as myFunction() as you currently do.
This answer is getting kind of long, but if you have a lot of different functions that all need some kind of repeat control in them you could implement a single function to handle that part of it:
function limitRepeats(fn, delay) {
var timerid = null;
return function() {
if (timerid) return;
timerid = setTimeout(function(){ timerid = null; }, delay);
fn();
};
}
// myFunction1 can only be called once every 1000ms
var myFunction1 = limitRepeats(function() {
console.log("fired myFunction1()");
}, 1000);
// myFunction2 can only be called once every 3000ms
var myFunction2 = limitRepeats(function() {
console.log("fired myFunction2()");
}, 3000);
$("#foo").click(function() {
myFunction1();
myFunction2();
});
I'm creating a content rotator in jQuery. 5 items total. Item 1 fades in, pauses 10 seconds, fades out, then item 2 fades in. Repeat.
Simple enough. Using setTimeout I can call a set of functions that create a loop and will repeat the process indefinitely.
I now want to add the ability to interrupt this rotator at any time by clicking on a navigation element to jump directly to one of the content items.
I originally started going down the path of pinging a variable constantly (say every half second) that would check to see if a navigation element was clicked and, if so, abandon the loop, then restart the loop based on the item that was clicked.
The challenge I ran into was how to actually ping a variable via a timer. The solution is to dive into JavaScript closures...which are a little over my head but definitely something I need to delve into more.
However, in the process of that, I came up with an alternative option that actually seems to be better performance-wise (theoretically, at least). I have a sample running here:
http://jsbin.com/uxupi/14
(It's using console.log so have fireBug running)
Sample script:
$(document).ready(function(){
var loopCount = 0;
$('p#hello').click(function(){
loopCount++;
doThatThing(loopCount);
})
function doThatOtherThing(currentLoopCount) {
console.log('doThatOtherThing-'+currentLoopCount);
if(currentLoopCount==loopCount){
setTimeout(function(){doThatThing(currentLoopCount)},5000)
}
}
function doThatThing(currentLoopCount) {
console.log('doThatThing-'+currentLoopCount);
if(currentLoopCount==loopCount){
setTimeout(function(){doThatOtherThing(currentLoopCount)},5000);
}
}
})
The logic being that every click of the trigger element will kick off the loop passing into itself a variable equal to the current value of the global variable. That variable gets passed back and forth between the functions in the loop.
Each click of the trigger also increments the global variable so that subsequent calls of the loop have a unique local variable.
Then, within the loop, before the next step of each loop is called, it checks to see if the variable it has still matches the global variable. If not, it knows that a new loop has already been activated so it just ends the existing loop.
Thoughts on this? Valid solution? Better options? Caveats? Dangers?
UPDATE:
I'm using John's suggestion below via the clearTimeout option.
However, I can't quite get it to work. The logic is as such:
var slideNumber = 0;
var timeout = null;
function startLoop(slideNumber) {
//... code is here to do stuff here to set up the slide based on slideNumber...
slideFadeIn()
}
function continueCheck() {
if (timeout != null) {
// cancel the scheduled task.
clearTimeout(timeout);
timeout = null;
return false;
} else {
return true;
}
};
function slideFadeIn() {
if (continueCheck){
// a new loop hasn't been called yet so proceed...
$mySlide.fadeIn(fade, function() {
timeout = setTimeout(slideFadeOut,display);
});
}
};
function slideFadeOut() {
if (continueCheck){
// a new loop hasn't been called yet so proceed...
slideNumber=slideNumber+1;
$mySlide.fadeOut(fade, function() {
//... code is here to check if I'm on the last slide and reset to #1...
timeout = setTimeout(function(){startLoop(slideNumber)},100);
});
}
};
startLoop(slideNumber);
The above kicks of the looping.
I then have navigation items that, when clicked, I want the above loop to stop, then restart with a new beginning slide:
$(myNav).click(function(){
clearTimeout(timeout);
timeout = null;
startLoop(thisItem);
})
If I comment out 'startLoop...' from the click event, it, indeed, stops the initial loop. However, if I leave that last line in, it doesn't actually stop the initial loop. Why? What happens is that both loops seem to run in parallel for a period.
So, when I click my navigation, clearTimeout is called, which clears it.
What you should do is save the handle returned by setTimeout and clear it with clearTimeout to interrupt the rotator.
var timeout = null;
function doThatThing() {
/* Do that thing. */
// Schedule next call.
timeout = setTimeout(doThatOtherThing, 5000);
}
function doThatOtherThing() {
/* Do that other thing. */
// Schedule next call.
timeout = setTimeout(doThatThing, 5000);
}
function interruptThings() {
if (timeout != null) {
// Never mind, cancel the scheduled task.
clearTimeout(timeout);
timeout = null;
}
}
When a navigation element is clicked simply call interruptThings(). The nice part is that it will take effect immediately and you don't need to do any polling or anything else complicated.