Javascript 摆动的物体不平稳地抖动

如果你看过我最近的帖子，你可能知道我一直在研究摆动物体。我现在似乎遇到的问题是，在添加了一些对象之后，它们在摆动时似乎在抖动。如果我只停留在一个上面，它运行正常。但当我在它们上面盘旋时，它们似乎相互作用

以下是完整的代码：

(function(){

 var box=document.getElementById('box');box2=document.getElementById('box2');box3=document.getElementById('box3');box4=document.getElementById('box4');

swing(box);swing(box2);swing(box3);swing(box4);

var eventFired = 0;

function swing(box) {
var ang  = 20,
   dAng = 10,
   ddAng = 3,
   dir  = 1;

function setAng(ang){
box.style.WebkitTransform =  'rotate('+ang+'deg)';
box.style.MozTransform =  'rotate('+ang+'deg)';

console.log('The ang is: ', ang);
console.log('Event Fired: ', eventFired);



dir = -dir;
if (dAng > 1) {
    dAng -= ddAng; }

if (Math.abs(ang) > 0) {
    var timeOUTid = setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng)); }

    eventFired++;
};

box.onmouseover = function(){  

if(typeof timeOUTid >= "0") {

    console.log(timeOUTid);

  window.clearTimeout(this.timeOUTid);
  delete this.timeOUTid;
}

box.style.WebkitTransform =  'rotate(-20deg)';
box.style.MozTransform =  'rotate(-20deg)';
var timeOUTid = setTimeout(function(){
    setAng(ang)
}, 1000);
}

};
}())

有没有一种方法可以使它们平滑，也许不会相互影响，或者有没有一种方法可以运行一次，然后停止

---

干杯伙计们

一些小的东西，这似乎是一个非常奇怪的情况：

typeof timeOUTid>=“0”

我从：-我想可能是每次悬停都设置了计时器，或者你应该改为使用

setInterval

。因为我想事情会永远摇摆不定。这可能无助于解决抽搐。这可能是因为摇摆动画很难计算，这会导致帧下降。对象不会永远摇摆，有一个计算会一次从它们应该摇摆的地方拿走一点。你介意创建一个JSFIDLE，这样我们就可以看到摇摆动画了吗