JavaScript's version of ActionScript's Event.ENTER_FRAME event? - Stack Overflow

admin管理员组

文章数量:1194361

I am trying to learn JavaScript and I am wondering whether JavaScript has a event listener just like ActionScript's ENTER_FRAME. Basically, I want this event listener to listen "all the time" not just wait for any particular instance (mouse click, keyboard event) of event.

I am trying to learn JavaScript and I am wondering whether JavaScript has a event listener just like ActionScript's ENTER_FRAME. Basically, I want this event listener to listen "all the time" not just wait for any particular instance (mouse click, keyboard event) of event.

• javascript
• actionscript-3

Share Improve this question Follow asked Jul 7, 2011 at 18:02 dennissdenniss 17.6k2626 gold badges9393 silver badges146146 bronze badges 1

• yeah - there's no such thing as a "frame" in the browser DOM - so there's nothing for javascript to listen for. Refer to the correct answers below. – Bosworth99 Commented Jul 7, 2011 at 18:07

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 9

This would probably be worth a look too : http://paulirish.com/2011/requestanimationframe-for-smart-animating/

You're looking for setInterval(func, time). In the case of making it work like ENTER_FRAME, then you would make time very small. So, if you wanted to imitate a frame rate of say, 30 times a 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 is in Flash too -- flash.utils.setInterval.

As a side note -- unfortunately, setInterval (in both Flash and JS) can work against the native refresh rate. In Flash ENTER_FRAME avoids this -- you render when the swf re-renders. In the browser, well, setInterval simply can't do that.

HTML5 provides access to the 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>

Credit goes to Keith Peters for helping sort this out. Highly recommend his book 'HTML5 animation with Javascript' by FriendsOfEd: http://www.apress.com/9781430236658

I am still learning how to convert AS3 to JavaScript, but would it not be this function:

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

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

Check out this helpful 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

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

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

But even then, you're pretty limited, because you don't have access to any of the event object properties.

本文标签： JavaScript39s version of ActionScript39s EventENTERFRAME eventStack Overflow