javascript - Server Side Implementation of requestAnimationFrame() in NodeJS - Stack Overflow

admin管理员组

文章数量:1191739

I have some questions regarding the wildly used requestAnimationFrame() functions. Recently I came across some implementation in multiplayer games who used it on the client instead of the server side.

1. Is there any benefit in doing so?
2. Can you reference me to any "best practices" server side implementation in NodeJS?

Update

I got a bit confused between the animation and game loop - what I was looking for is an implementation in NodeJS => e.g setInterval.

Example - Client side implementation

(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x] + 'CancelAnimationFrame'] ||
            window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
}());

I have some questions regarding the wildly used requestAnimationFrame() functions. Recently I came across some implementation in multiplayer games who used it on the client instead of the server side.

1. Is there any benefit in doing so?
2. Can you reference me to any "best practices" server side implementation in NodeJS?

Update

I got a bit confused between the animation and game loop - what I was looking for is an implementation in NodeJS => e.g setInterval.

Example - Client side implementation

(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x] + 'CancelAnimationFrame'] ||
            window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
}());

• javascript
• node.js
• client
• server

Share Improve this question Follow edited Jul 17, 2019 at 2:17 Trung0246 68911 gold badge1111 silver badges2121 bronze badges asked May 25, 2015 at 17:02 HansMusterWhatElseHansMusterWhatElse 67111 gold badge1515 silver badges3636 bronze badges 2

• What would an "animation frame" even mean in a server application? – Pointy Commented May 25, 2015 at 17:05
• My mistake, what I meant was the game cycle and not per se the animation loop - I should have been clearer. What I was looking for is an implementation of a server side game loop in NodeJS. – HansMusterWhatElse Commented May 25, 2015 at 17:14

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 18

Is there any benefit in doing so?

In the client - there is. While setTimeout and its friends run in the timers queue - requestAnimationFrame is synced to a browser's rendering of the page (drawing it) so when you use it there is no jitter since you telling it what to draw and the browser drawing are in sync.

Typically games have two loops - the render loop (what to draw) and the game loop (logic of where things are). The first one is in a requestAnimationFrame and the other in a setTimeout - both must run very fast.

Here is a reference on requestAnimationFrame by Paul Irish.

Can you reference me to any "best practices" server side implementation in NodeJS?

Since the server does not render any image - there is no point in polyfilling requestAnimationFrame in the server. You'd use setImmediate in Node/io.js for what you'd use requestAnimationFrame for in the client.

Simply put - requestAnimationFrame was added to solve a problem (jitterless rendering of graphic data) that does not exist in servers.

function requestAnimationFrame(f){
  setImmediate(()=>f(Date.now()))
}

if(!window.requestAnimationFrame) 
    window.requestAnimationFrame = window.setImmediate

本文标签： javascriptServer Side Implementation of requestAnimationFrame() in NodeJSStack Overflow