Question

我正在尝试学习JavaScript，我想知道JavaScript是否像ActionScript的ENTER_FRAME一样有一个事件监听器。基本上，我希望这个事件监听器“一直”监听，而不仅仅是等待事件的任何特定实例（鼠标点击，键盘事件）。

Answer 1

这也许值得一看： http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 2

您正在寻找setInterval(func, time)。在使它像ENTER_FRAME一样工作的情况下，你会花时间非常小。所以，如果你想模仿一个帧速率，每秒30次：

 // 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.

实际上，setInterval也在Flash中 - flash.utils.setInterval。

作为附注 - 不幸的是，setInterval（在Flash和JS中）都可以对抗本机刷新率。在Flash中，ENTER_FRAME避免了这种情况 - 你在swf重新渲染时渲染。在浏览器中，setInterval根本无法做到这一点。

Answer 3

HTML5提供对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>

感谢Keith Peters帮忙解决这个问题。强烈推荐FriendsOfEd出版的他的书“带有Javascript的HTML5动画”： http://www.apress.com/9781430236658

Answer 4

我还在学习如何将AS3转换为JavaScript，但它不是这个函数：

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

gameLoop是每个'tick'都会调用的自定义函数。

查看使用JavaScript而不是AS3在Adobe Animate CC中编写游戏的有用示例：https://software.intel.com/en-us/html5/hub/blogs/flash-cc-to-html5

Answer 5

不。并不是的。一个很好的替代品是setInterval或setTimeout：

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

但即便如此，你还是非常有限，因为你无法访问任何事件对象属性。

JavaScript的ActionScript的Event.ENTER_FRAME事件版本？

5 个答案: