创建 jquery 不使用递归的无限动画？
create jquery infinite animation not using recursion?
如何使用jquery制作无限动画，
但不使用递归方式？
我找到的递归解法：jQuery .animate() callback infinite loop
使用递归的问题是：
动画时，当前页面的浏览器选项卡将占用越来越多的内存。
已更新测试结果
结论...所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以不是真正的问题。
示例 1
这是 OP 最初遇到内存使用量增加问题的代码 Chrome。
(function($){
$(function(){ //document.ready
function start() {
$('#animate').animate({'margin-left':'150px'}, 1000, function () {
$(this).animate({'margin-left':'50px'}, 1000, 'linear', start);
});
}
start();
});
})(jQuery);
示例 2
当前的解决方案包括 Bergi 请求的回调以避免潜在的 "drifting" 在 setinterval 中。
(function($){
$(function(){ //document.ready
});
(function customSwipe(element) {
element
.animate({"margin-left" : "150px"}, 1000)
.animate({"margin-left" : "50px"}, 1000, function(){
setTimeout(function(){
customSwipe(element);
}, 2000);
});
})($('#animate'));
})(jQuery);
示例 3
我给出的原始答案，使用 setInterval()
(function($){
$(function(){ //document.ready
setInterval(function(){
$("#animate").animate({'margin-left':'150px'},1000);
$("#animate").animate({'margin-left':'50px'},1000);
},2000);
});
})(jQuery);
骷髅 w/ Jquery
只有#animate 元素的空白页面
(function($){
$(function(){ //document.ready
});
})(jQuery);
选项卡打开 10 分钟后的数据
CODE STARTING ENDED
Example 1 14.300k 19.996k
Example 2 14.300k 20.020k
Example 3 14.300k 20.344k
Skeleton w/ jQuery 14.300k 15.868k
有趣的是，什么都不做的代码仍然略微增加了使用率。这些值随着内存的使用和释放而上下波动。另一件事是使用任务管理器中的 "purge memory" 按钮查看已用内存中有多少是等待收集的垃圾。
25 分钟后的数据
Example 1 14.300k 18.640k
Example 2 14.300k 18.724k
Example 3 14.300k 18.876k
Skeleton w/ jQuery 14.300k 15.868k
结论...所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以不是真正的问题。
所以只用最扎实、最完善的代码是最好的选择，示例2是我的选择。
已使用回调更新
您尝试过将 setTimeout 与 $.animate() 一起使用吗？
(function($){
(function customSwipe(element) {
element
.animate({'margin-left':'150px'}, 1000)
.animate({'margin-left':'50px'}, 1000, function(){
setTimeout(function(){
customSwipe(element);
}, 2000);
});
})($('#animate'));
$(function(){ //document.ready
});
})(jQuery);
如果您不需要 setTimeout() 在动画之间进行延迟，请删除它。
JSFIDDLE of the above code working...
您可能还想研究这个以获得更复杂的动画。
http://api.jquery.com/jquery.fx.interval/
结论...所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以不是真正的问题。
您在 Chrome TM 中看到的是，每次触发动画时，都会请求那么多内存，而 OS "commits" 内存 chrome为操作。一旦操作完成，内存仍然被提交。在某些时候 Chromes 垃圾收集器出现并释放内存，您的使用统计数据将回落。因此，如果您观看足够长的时间，您会看到内存在上升和下降。
您可以将 --purge-memory-button 放在 Chrome 命令行的末尾，以便在 Chrome TM 中使用清除内存按钮。这可能会帮助您了解实际等待释放的内存量。
希望这个回答对您和其他人有所帮助。
您实际上错误地假设代码是"recursive"。它不是递归的。您对 "the browser tab of current page will take MORE and MORE memory." 的评论不是因为该代码中的任何递归。如果你每秒有一次内存泄漏（根据你的评论），那么问题出在别处。
代码实例实际上 运行 顺序 而不是 通过嵌套堆栈调用（即线性而非递归）。
使用您链接到的最基本示例：
function start() {
$('#element').animate({}, 5000, 'linear', start);
}
start();
实际情况如下：
- 定义了一个名为
start的函数，然后调用一次
- 里面
start开始了一个动画操作，然后start马上退出！
animate只是将信息添加到元素的单个动画队列，然后returns。- 动画队列由单独的进程（单个计时器等）逐步处理。
- 当排队条目达到其预期结束状态时，它调用回调 - 存储在排队条目中的全局
start 函数。
- 这很简单，在动画队列中添加另一个条目并退出。
基本上代码看起来是递归的，但是由于操作是异步的，通过队列，它不是递归的。我不知道这些是否有正式名称，所以我只是称它们为链式回调。
如何使用jquery制作无限动画， 但不使用递归方式？
我找到的递归解法：jQuery .animate() callback infinite loop
使用递归的问题是： 动画时，当前页面的浏览器选项卡将占用越来越多的内存。
已更新测试结果
结论...所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以不是真正的问题。
示例 1
这是 OP 最初遇到内存使用量增加问题的代码 Chrome。
(function($){
$(function(){ //document.ready
function start() {
$('#animate').animate({'margin-left':'150px'}, 1000, function () {
$(this).animate({'margin-left':'50px'}, 1000, 'linear', start);
});
}
start();
});
})(jQuery);
示例 2
当前的解决方案包括 Bergi 请求的回调以避免潜在的 "drifting" 在 setinterval 中。
(function($){
$(function(){ //document.ready
});
(function customSwipe(element) {
element
.animate({"margin-left" : "150px"}, 1000)
.animate({"margin-left" : "50px"}, 1000, function(){
setTimeout(function(){
customSwipe(element);
}, 2000);
});
})($('#animate'));
})(jQuery);
示例 3
我给出的原始答案，使用 setInterval()
(function($){
$(function(){ //document.ready
setInterval(function(){
$("#animate").animate({'margin-left':'150px'},1000);
$("#animate").animate({'margin-left':'50px'},1000);
},2000);
});
})(jQuery);
骷髅 w/ Jquery
只有#animate 元素的空白页面
(function($){
$(function(){ //document.ready
});
})(jQuery);
选项卡打开 10 分钟后的数据
CODE STARTING ENDED
Example 1 14.300k 19.996k
Example 2 14.300k 20.020k
Example 3 14.300k 20.344k
Skeleton w/ jQuery 14.300k 15.868k
有趣的是，什么都不做的代码仍然略微增加了使用率。这些值随着内存的使用和释放而上下波动。另一件事是使用任务管理器中的 "purge memory" 按钮查看已用内存中有多少是等待收集的垃圾。
25 分钟后的数据
Example 1 14.300k 18.640k
Example 2 14.300k 18.724k
Example 3 14.300k 18.876k
Skeleton w/ jQuery 14.300k 15.868k
结论...所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以不是真正的问题。
所以只用最扎实、最完善的代码是最好的选择，示例2是我的选择。
已使用回调更新
您尝试过将 setTimeout 与 $.animate() 一起使用吗？
(function($){
(function customSwipe(element) {
element
.animate({'margin-left':'150px'}, 1000)
.animate({'margin-left':'50px'}, 1000, function(){
setTimeout(function(){
customSwipe(element);
}, 2000);
});
})($('#animate'));
$(function(){ //document.ready
});
})(jQuery);
如果您不需要 setTimeout() 在动画之间进行延迟，请删除它。
JSFIDDLE of the above code working...
您可能还想研究这个以获得更复杂的动画。
http://api.jquery.com/jquery.fx.interval/
结论...所有方法都会消耗相同数量的内存，最终会被释放，不会永远持续构建，所以不是真正的问题。
您在 Chrome TM 中看到的是，每次触发动画时，都会请求那么多内存，而 OS "commits" 内存 chrome为操作。一旦操作完成，内存仍然被提交。在某些时候 Chromes 垃圾收集器出现并释放内存，您的使用统计数据将回落。因此，如果您观看足够长的时间，您会看到内存在上升和下降。
您可以将 --purge-memory-button 放在 Chrome 命令行的末尾，以便在 Chrome TM 中使用清除内存按钮。这可能会帮助您了解实际等待释放的内存量。
希望这个回答对您和其他人有所帮助。
您实际上错误地假设代码是"recursive"。它不是递归的。您对 "the browser tab of current page will take MORE and MORE memory." 的评论不是因为该代码中的任何递归。如果你每秒有一次内存泄漏（根据你的评论），那么问题出在别处。
代码实例实际上 运行 顺序 而不是 通过嵌套堆栈调用（即线性而非递归）。
使用您链接到的最基本示例：
function start() {
$('#element').animate({}, 5000, 'linear', start);
}
start();
实际情况如下：
- 定义了一个名为
start的函数，然后调用一次 - 里面
start开始了一个动画操作，然后start马上退出！ animate只是将信息添加到元素的单个动画队列，然后returns。- 动画队列由单独的进程（单个计时器等）逐步处理。
- 当排队条目达到其预期结束状态时，它调用回调 - 存储在排队条目中的全局
start函数。 - 这很简单，在动画队列中添加另一个条目并退出。
基本上代码看起来是递归的，但是由于操作是异步的，通过队列，它不是递归的。我不知道这些是否有正式名称，所以我只是称它们为链式回调。