Geek Answers Handbook

JavaScript version of ActionScript Event.ENTER_FRAME?

I'm trying to learn JavaScript, and I'm wondering if JavaScript has an event listener like ActionScript ENTER_FRAME. Basically, I want the listener of this event to listen “all the time” not just to wait for any particular instance (mouse click, keyboard event) of the event.

+4
source share
5 answers

You are looking for setInterval(func, time) . In case it works like ENTER_FRAME, you will make the time very small. So, if you want to simulate a frame rate of, say, 30 times per second:

  // you will need to make sure you have good scoping around the function param. setInterval(function(){console.log('enterframe')}, 33) // 33 is about 1000 milliseconds / 30.

Actually, setInterval also in Flash - flash.utils.setInterval .

As a side note - unfortunately, setInterval (in both Flash and JS) may work against its own refresh rate. In Flash, ENTER_FRAME avoids this - you are rendering the SWF. In the browser, well, setInterval just can't do it.

+6
source

HTML5 provides access to requestAnimationFrame()

 <canvas id="canvas" width="400" height="400"></canvas> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), var counter = 0; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); console.log(counter++); // animation code goes here }()); }; </script>

The loan goes to Keith Peters for helping to figure this out. I highly recommend his book "HTML5 Animation with Javascript" by FriendsOfEd: http://www.apress.com/9781430236658

+4
source

I am still learning how to convert AS3 to JavaScript, but will this feature not be:

 createjs.Ticker.addEventListener("tick", gameLoop);

gameLoop is a custom function that will be called on every tick.

Check out this useful example of writing a game in Adobe Animate CC using JavaScript instead of AS3: https://software.intel.com/en-us/html5/hub/blogs/flash-cc-to-html5

+3
source

Nope. Not really. A good replacement would be setInterval or setTimeout :

 function doAllTheTime() { } function wrapper() { doAllTheTime(); setTimeout(wrapper, 40); } wrapper();

But even then you are quite limited, because you do not have access to any properties of the event object.

+2
source

More articles:


All Articles