Question

我有下面的当前功能，但感觉有更好的方法来编写相同的东西。我正在寻找一些关于下面编写相同功能的最优化方法以及原因的见解。

请注意，这都在$(function(){});

之内

m = function(){
  $("#id").animate({marginRight : 0}, 'slow', function(){
       $("#id").animate({marginRight : "15px"}, 'slow');
     })
} 
 setInterval(m, 700)

Answer 1

m = function(){
  $("#id").animate({marginRight : 0}, 'slow', function(){
       $("#id").animate({marginRight : "15px"}, 'slow',m);
     });
} 
m();

看来，根据你正在做的事情，你想要随着时间的推移切换一个元素的运动。您可以将原始函数m()设置为在第二个内部动画完成时执行的回调。

Answer 2

(function m(){
    $("#id").animate({marginRight : 0}, 'slow', function(){
        $(this).animate({marginRight : "15px"}, 'slow',function(){
            setTimeout(m,700);
        });
     });
})();

编辑：

它使用setTimeout，但是，setTimeout是比setInterval更好的解决方案，因为如果前一个完成，它只会排队一个新的。这有助于防止jquery 1.6目前使用的RAF问题。

Answer 3

您可以即兴在第一个动画回调中使用this，而不是再次找到它。除此之外我不认为可以在这里做任何进一步的改进。

m = function(){
  $("#id").animate({marginRight : 0}, 'slow', function(){
       $(this).animate({marginRight : "15px"}, 'slow');
     })
} 
 setInterval(m, 700);

比setInterval更好的方法？

3 个答案: