javascript - 是什么导致 "drone"在以特定 Angular 转动时出现抖动？

Question

http://codepen.io/AlexKM/pen/JGEMjZ

turnTo: function (X, Y) {
    var angleDiff = 0,
        targetA = this.angleToPoint({
            x: X,
            y: Y
        }),
        dronA = this.angle;
    ///   If the angle difference can't be reached in a frame
    if (Math.abs(targetA - dronA) > this.turnSpeed * 1.25) {
        this.workingAngle = true;
        angleDiff = targetA - dronA;
        while (angleDiff < 0)
            angleDiff += 2 * Math.PI;
        while (angleDiff > 2 * Math.PI)
            angleDiff -= 2 * Math.PI;

        if (angleDiff >= Math.PI) {
            this.turningLeft = true;
        } else {
            this.turningRight = true;
        }

    } else ///  if the diff is negligible, reach it to save CPU
        this.angle = targetA;
},

更新处理实际车削的函数片段:

    // apply turning
    if (this.turningLeft) {
        this.angle -= this.turnSpeed;
    }
    else if (this.turningRight) {
        this.angle += this.turnSpeed;
    }

红点 - 面向无人机
橙色圆点 - 表示无人机正在左转或右转
青色点 - 无人机是否正在重新计算 Angular/进行三 Angular 学的信号

代码确实包含一个帮助其平滑的部分，基本上通过简单地设置鼠标的 Angular (如果可以在 testDrone.turnSpeed 变量的帧内到达)来实现。

大约一半的时间，它会转动并顺利工作。另一半则神经兮兮，左右交替，不断计算三 Angular 函数。

这可能是什么原因？

Answer 1

不错的剧本。 :)

我认为抖动可能是(帧率(fps)+处理时间)和显示器刷新率之间差异的函数。我这样说是因为有时它看起来很光滑，有时它有点凹凸不平，而且就鼠标位置/移动而言，似乎没有特定的模式。

您是否考虑过使用 requestAnimationFrame() 而不是 setTimeout()？ See MDN HERE ，其中指出...

This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.

参见markE的回复this StackOverflow question关于限制对特定帧速率的 requestAnimationFrame 调用。

希望有帮助。 :)