在看别人代码的时候看到这么一段：

var delta;function loop(){    var now = new Date() - 0;    var d = (now - delta)/(1000/60);//此处delta为上一帧的时间点    delta = now;    update(d);    render();    requestAnimationFrame(loop);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
  

对此进行整理分析，
这属于一个渲染循环，1000/60为每一帧的时间，此处为每秒60帧的渲染频率。在函数中的d为增量时间，在理想状态下，增量时间为1，但是如果运行过程中需要进行的运算很多，或者其他方面导致了渲染延迟卡顿，这样可以保持渲染层渲染的位置等信息与逻辑层保持一致。
在其中的update 函数接受的变量为增量时间，根据这个增量时间计算逻辑层的变化，
例如：
在逻辑层面每过（1000/60）秒（一个时间增量）物体位置移动了1，假如此时渲染层卡顿了一下，帧数下降了一半也就是经过了(1000/30)秒才渲染，那么这个物体位置实际上移动了2，而渲染位置也移动了2，能够正确渲染。假如把逻辑层与渲染层混起来，那么可能导致渲染层影响了逻辑层，原本在1秒内经过20个单位，而因为机器不行只经过了15个单位，这不是我们想要的，所以要将逻辑层与渲染层分开。而且requestAnimationFrame() 这个函数是非常不稳定的，即便是硬件设备比较好，可能每秒少了一帧，随着时间少的帧会越来越多，导致误差越来越大。
因此在实际情况下，渲染层与逻辑层的时间务必要分开，从而减少时间上导致的差异。

很不错，受教了