1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | var SnailBait = function (canvasId) { ... this.paused = false, this.PAUSED_CHECK_INTERVAL = 200; // milliseconds ... }; SnailBait.prototype = { animate: function (now) { if (snailBait.paused) { // Check again in snailBait.PAUSED_CHECK_INTERVAL milliseconds setTimeout( function () { requestNextAnimationFrame(snailBait.animate); }, snailBait.PAUSED_CHECK_INTERVAL); } else { // The game loop from snailBait.fps = snailBait.calculateFps(now); snailBait.draw(now); requestNextAnimationFrame(snailBait.animate); } }, togglePaused: function () { this.paused = !this.paused; }, }; |
如果页面目前不可见,可以大幅裁剪该页面上的动画,那么就不会经常更新这些页面,因此只会占用极少的 CPU 资源。术语大幅节流意味着,浏览器以极低的帧速率(通常介于 1 到 10 fps 之间)调用您的动画回调,如图 1 所示,帧速率在窗口重新获得焦点后立即达到 6fps:
1 2 3 4 5 6 7 8 9 10 11 | window.onblur = function () { // window looses focus if (!snailBait.paused) { snailBait.togglePaused(); } }; window.onfocus = function () { // window regains focus if (snailBait.paused) { snailBait.togglePaused(); } }; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |