使用 JS/jQuery 移动 div 的最流畅方法

Question

我需要将 div 从屏幕右侧移动到左侧，但是同时使用经典 JS 和 jQuery 会使它变得不稳定：

我的 div：

<div class="lisp" id="lisp0" style="top:100px;">)</div>
<div class="lisp2" id="lisp1" style="top:300px;">)</div>

经典 javascript 方法：

function move()
{
  pos = parseInt($("#lisp1").css("right"));
  $("#lisp1").css("right", pos+10+"px");
}
var interval = setInterval("move()",10);

jQuery 方法：

$("#lisp0").animate({"left": "-=2200px"}, 10000);

我做了一个 网页 向您展示它有多不稳定。第一步是使用 jQuery（最流畅的），第二步是使用经典 JS。对于几个 div（和经典的 JS），它开始变得非常烦人。 我尝试修改 jQuery.fx.interval，但它并没有真正提高性能。

所以我的问题是：让这些 div 顺利移动的最佳方法是什么？

Answer 1

您要求我提供一个提高速度的示例，我不是专家，但这就是我会做的：

1. 不要将 setInterval 与字符串函数一起使用，它们必须运行 < code>eval 来运行，因此请使用它。事实上，我根本不会在主循环中使用 setInterval （参见第 #3 点）。

   setInterval(doSomething, 100)
   

2. 存储您将多次使用的对象（尤其是在不断循环的函数中）。即使这个例子也不理想：

   var lisp = $('#lisp1');
   函数移动()
   {
    var pos = parseInt( lisp.css("右"), 10 ); // 始终使用基数
    lisp.css("右", pos + 10 + "px");
   }
   

3. 对于不断循环的函数，应尽可能简短并消除额外的函数调用。从你的第二个链接中，我压缩了这段代码：

   函数移动(){
         $(".lisp").each(function(){
   pos = parseInt($(this).css("右"));
       if (位置>宽度)
         $(this).remove();
       别的
         $(this).css("右", pos+速度+"px")
     });
     $(".bonus").each(function(){
       pos = parseInt($(this).css("右"));
       if (位置>宽度)
         $(this).remove();
       别的
         $(this).css("右", pos+速度+"px")
     });
     $(".special").each(function(){
       pos = parseInt($(this).css("右"));
       if (位置>宽度)
         $(this).remove();
       别的
         $(this).css("右", pos+速度+"px")
     });
   }
   

   进入这个更简洁的版本：

   函数移动(){
     $(".lisp, .bonus, .special").each(function(){
       var pos = parseInt(this.style.right || 0, 10);
       如果（位置>宽度）{
         $(this).remove();
       } 别的 {
         this.style.right = pos + speed + "px";
       }
     });
     if (!over) { setTimeout(move, 10); } } // 使用它代替 setInterval()
   }
   

   这仍然不理想，因为您的代码不断添加越来越多的对象。它应该受到限制，因为屏幕上有超过 200 个对象，并且页面变得缓慢。这也是为什么我会在最后一行使用 setTimeout 而不是您使用的 setInterval，因为脚本可能不会在您希望它执行之前循环遍历所有元素。重新开始。

我确信其他人可以添加更多点来进一步优化我或您的代码:)