How can setTimeout() and setInterval() affect each other? - javascript

I am writing my first website, where a user's goal is to choose an object with the fastest bpm(rhythm). There are 2 big objects with 2 different bpm's, each of them is activated when you place a cursor on it (i use event listener with mouseover).
I decided to make a delay between "rhythm switching" because when a user moves his cursor quickly from one object to another, the next rhythm plays immediately and it feels uncomfortable.
But with code below the whole rhythm playing system breaks and rhythm starts playing even if the cursor is not hovering over the object (it happens if you quickly move the cursor over and back again the object several times). Clearing the interval of the timer used for rhythm playing doesn't help.
If the commented part is uncommented and the "if" part is commented, then everything works fine but I don't get the delay.
t0 is a time measured when mouseout event happens. play_bpm1 is a function executed on mouseover event for the first object. There is the same function for the second object. pla() is used to play one beat immediately, play(bpm) is a function using pla() with setInterval, so when executed rhythm starts playing. rtimer is a timer which is used in play(bpm) with setInterval.
var play_bpm1 = function(){
if(performance.now()-t0 <= (60000/bpm2)){ //delay between rhythm switching
rdelay1 = setTimeout(function(){
clearInterval(rtimer);
pla();
play_rt(bpm1);
}, (60000/bpm2)-(performance.now()-t0) )
}
else{
clearInterval(rtimer);
pla();
play_rt(bpm1);
}
// pla();
// play_rt(bpm1);
}

Related

removeEventListener("timeUpdate", myFunction) is unstable during video play

An event listener is added once my video starts playing. That is
document.getElementById("myVideo").addEventListener("timeUpdate", myFunction);
and then just before the video ends I want something to happen (perhaps a fade out) along with the last few seconds of the video (or to keep things simple I'm just going to write something like alert("goodbye");) instead.
and when I use this piece of code
var myVideo = document.getElementById ("myVideo");
function myFunction(){
if(myVideo.currentTime >= (myVideo.duration-3) )
{
alert("this goodbye message is supposed to be displayed only once and exactly three seconds before the video ends");
myVideo.removeEventListener("timeupdate", myFunction);
}
}
it works in Chrome but it's unstable. Sometimes it works fine but other times the alert keeps popping a few times before the event listener is actually removed (which is bad in my case). In Firefox it is even worse as it fires many times.
I know that different browsers make timeupdate event fire at very different intervals.
So what do you think? Should I give up on the
addEventListener()
removeEventListener()
couple and use
setInterval()clearInterval() to check where the playhead is and do stuff when the time comes.
That way instead of browser dependent time intervals I could set my own time interval for consistency. But does anybody know if there is a reliable way to do this with timeUpdate?
I used a timer instead and now it works perfectly.
var checkThePlayheadPositionTenTimesASecond = setInterval(myTimer, 100);
function myTimer()
{
if(myVideo.currentTime >= (myVideo.duration-3) )
{
alert("this video is going to end in three seconds");
clearInterval(checkThePlayheadPositionTenTimesASecond);
}
}
Still I'm going to leave this post active in case anyone has to say anything.

Animate CC gotoAndStop for HTML5 Canvas

I'm trying to create a simple plant collecting game. When you click all the plants, game ends and sends you to third frame.
1st frame, start button (just wrote start, didn't try to add navigation yet)
2st frame, game area.
3st frame, game over text.
When I start the animation, it passes through 1st frame and comes to second. I've written "stop()" at top of this frame so we can play now.
var kalanMeyve = 7;
// this fruit instance, click event, bind same function but remove yourself (this.instance)
this.ananas.addEventListener("click", fl_MouseClickHandler.bind(this.ananas));
this.armut.addEventListener("click", fl_MouseClickHandler.bind(this.armut));
this.cilek.addEventListener("click", fl_MouseClickHandler.bind(this.cilek));
this.domates.addEventListener("click", fl_MouseClickHandler.bind(this.domates));
this.kirmizibiber.addEventListener("click", fl_MouseClickHandler.bind(this.kirmizibiber));
this.muz.addEventListener("click", fl_MouseClickHandler.bind(this.muz));
this.sogan.addEventListener("click", fl_MouseClickHandler.bind(this.sogan));
function fl_MouseClickHandler() {
this.parent.removeChild(this);
kalanMeyve--;
if(kalanMeyve == 0)
{
//alert here works when game over
}
}
All instances, variables etc. are correct. In fact, when I try to check if my if statement working, it works. I can put an alert when the game is over. But can't navigate to another frame.

Html assignment

I have an HTML issue. This is for a intro web programming class that I have no clue what is going on.
Some web pages are written in a comibination of HTML and JavaScript. In this Application, you will create a video game using HTML and JavaScript. The idea of the game is that an image will move on screen randomly and the player will try to click the image as many times as possible before time runs out. The score will increase each time the player successfully clicks the image.
Perform the following steps:
Create a Web page called “game.html” and place it in the root directory. To that page, add a layer, which will be treated as an object, with an image for its contents. Add another image which will start the game when clicked on. When the game starts, the layer, including the image, will move randomly in any direction but not more than 10 pixels. The layer will not leave the visible screen space. You may assume an 800x600 resolution setting. Be creative when choosing your images, but avoid anything that may be considered explicit or offensive.
Add a timer, or loop, to determine how long the game will run. This should be set to 30 seconds. You will need to experiment to determine how many times a loop must repeat to make it last 30 seconds. One of the ways to accomplish this is by using the command “setTimeout()” which executes a code some time in the future. As an example, the following command will call the function “FlyLogoIE” exactly 50 milliseconds after this line is executed:
setTimeout("FlyLogoIE()",50);
The game should proceed as follows:
The score starts at 0. Each time the user clicks the image, one point is added to the score. This score is constantly displayed either on the status bar or somewhere in the background.
On every click, the layer also moves randomly, by not more than 10 pixels, to another part of the screen.
The game continues until the time runs out. Optionally, a dialog box appears telling the user his or her final score. The user now has the option to restart the game by clicking the “Start” image again.
For an extra challenge, implement levels of difficulty for the game. Add instructions that prompt the user for the level of difficulty at which he or she wants to play. A higher level of difficulty would correspond to either faster motion, a smaller target, or both. Perform this step only if all other requirements are met and you still have time before the due date. No extra points will be given to you for this step.
Add a link from your homepage to this web page.
Test the code thoroughly before publishing it.
Here is what I've done so far, but am lost. Can you help?
<Layer Name="game" LEFT=400 TOP=500>
<a href="#" onClick="return moveGame()";> Start! </a>
<br>
<IMG <span id= "Game" style= "left: 100px; top 100px; position; absolute;" SRC="/pics/drone.jpg" alt="drone" width="100">
<script>
<SCRIPT LANGUAGE="javascript">
function moveGame(){
var x;
x = Math.floor(Math.random()*4+1);
if (x==4 && game.style.pixelLeft>=10) {game.style.pixelLeft-=10;}
if (x==3 && game.style.pixelRight>=5) {game.style.pixelRight-=5;}
if (x==2 && game.style.pixelUp>=10) {game.style.pixelUp-=10;}
if (x==1 && game.style.pixelDown>=5) {game.style.pixelDown-=5;}
setTimeout("moveGame()",50);
}
</script>
</layer>`
Start of with something like this:
JS:
// timer
var gameLength = 30 * 1000; // 30 seconds
function startGame(){
runGame();
setTimeout( endGame, gameLength );
}
function endGame(){
// stop listening for click
}
function runGame(){
// register click listeners
// main game loop
}
var myElement = {
htmlElement: "img",
onClick: function(){ /* do stuff */ },
moveRandomly: function(){ /* do stuff */ },
state: 'listening' // or not
}
var viewPort = {
htmlElement: 'div',
draw: function(){ /* do stuff */ }
}
This is really just to get you started. There is more and it could be written better. You need to Object Orient this stuff so that each component is easy to understand, easy to modify, and then you'll be on your way in programming.
Part of learning programming is the struggle. Most everyone has been there. Don't give up.

jQuery/JavaScript wait for page to load, but no shorter than specified time

I'm having the following issue:
I want to display an overlay until the page loads completely, which works just fine.
The problem is that on fast connections the overlay would disappear immediately, which is not what I want to achieve.
I was trying to do it the following way:
$(document).ready(function(){
setTimeout(function(){
$(window).load(function(){
$('#overlay').fadeOut(1200);
});
},1500);
});
which seemed logical to me. Didn't work. I replaced setTimeout with setInterval, didn't work, too. I put the $(window).load...etc. in a function and called it with an external setTimeout, no success. The best result in regard to that additional timer was, that browsers ignored it altogether; most of the time the overlay just stays there, nothing happens.
What am I missing?
You certainly don't need $(window).load... within the setTimeout function. In fact, putting it within the timeout will ensure that it never executes since the window.load event will have already fired before you assign it your function to fadeOut the overlay.
I've adjusted my code based on your feedback. The basic principle is to determine how long it took to get everything ready and then reduce the timeout based on the time already elapsed. This way your fastest connections will still get a delay while your slowest connections will execute the fadeout immediately.
Live Demo
//Put this line in a script tag as high up on the page as possible
window.timeInMs = Date.now();
Instead of document.ready which executes after the document is loaded, use window.load which executes after the entire page has loaded (frames, objects, images) - src.
$(window).load(function(){
var maxTimeout = 1500;//Everyone waits at least this amount, including fast browsers.
//Compute the elapsed time, default to 0 if more than maxTimeout has elapsed.
var remainingTime = Math.max(maxTimeout - (Date.now() - window.timeInMs), 0);
setTimeout(function(){
$('#overlay').fadeOut(1200);
}, remainingTime);
});

HTML5 + Javascript audio trigger events at certain times in audio playback

I am researching setting up a script that will show certain notes along with accompanying music tracks. Basically I need certain times in the audio track to trigger events. I have seen I could use the currentTime similar to the following, but I am getting hung up on a good way to make a concise function to move between frames and move back and firth if there is a rewind etc. Help's appreciated greatly!
$("#ogg_player_1_obj").bind('timeupdate', notePosition);
function notePosition(){
myVid=document.getElementById("ogg_player_1_obj");
mct=myVid.currentTime;
//SET Frame based on time???
}
function notePosition(){
//your code.
if(frame1start <= mct && frame1end >= mct) {
$(".frame").fadeOut(100);
$("#frame1").fadeIn(100);
}
//and again for every frame.
}
This works if you put every frame in a seperate element with class frame and the id frame + number.

Categories

Resources