assigning window.requestAnimationFrame javascript canvas explain it please?

Question

var vendors = ['webkit', 'moz'];
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'];
}

I copied this from https://coderwall.com/p/iygcpa/gameloop-the-correct-way

this is js code so window.requestAnimationFrame is a method for calling a function before the next repaint of page but here from an authentic example, he is not using it as a function he is assigning to it can someone explain to me why do this?

I understand what is window.requestAnimationFrame() but the code I have quoted up side I didn't understand, like why this code is used what it really does?

Answer 1

There was a time where all browsers did not support this method. Before they reach on an agreement on how it should proceed and how it should be specced clearly, each vendor made their own version of what was approximately the same feature. However, knowing this might not act exactly as the to-be final version, they decided to only expose this under an hidden name, using their own "vendor-prefix" as a mean to let developers play with this experimental feature before it became stable.

The code you found does wrap them all under the same now-official names requestAnimationFrame and cancelAnimationFrame so that calling this only method will call either the now-official version, or the experimental vendor-prefixed one if unavailable.

_{In modern browsers you don't need this, and in older browsers you may want to actually polyfill it with setTimeout.}