Javascript 简化JS/JQuery中的执行流程

简化JS/JQuery中的执行流程 我有这样的循环：

for (int i = 0; i < 100; i++)
{ 
   doSomething(...); // returns momentally
}

其中，

开始

结束是整数，指定动画范围，

持续时间

是以毫秒为单位的动画持续时间，

放松

是用于在一个范围内设置值动画的放松模式，

执行

-使用

0

到

100

的值调用的函数，使用上面示例中提供的放松模式，它将使用

easeOutBounce

放松功能在

0.9

秒内将myDiv的高度从

0

设置为

100

---

理想情况下，作为一个基于

jQuery

的小型独立插件，绝对不是

Mootools

或任何其他重量级插件的一部分，我不能仅仅为此而引入它们。

如果我正确理解了您的问题……您可以尝试使用.delay（100）或.delay（XMillesons），因此每一步都需要更长的时间

---

阅读关于延迟的更多信息：

尽我所能，我尝试使用jQuery“animate”属性实现您想要的东西

使用此jQuery属性将允许根据需要添加“缓解”、“持续时间”、“回调”等。我使用“step”属性来实现这一点

为了工作，您需要向HTML添加一个“虚拟”标记并将其隐藏

演示： HTML

<!-- Add a dummy tag to apply animate property -->
<span class="holder" style="display:none" ></span>​

​

jQuery

$('.holder').animate(
    {
        'end': 100 // There is no such "end" css property just using as an end mark
    },
    {
        duration: 500,
        step: function(now, fx) {
            myFunction(now); // Call your function here with the "now" param (i.e ExternalModule.DoSomethingUseful(now) ) in your case                      
        }
        // Add easing property if wanted
    }
);

// The function
function myFunction(param){
    $('body').append('Value now: ' + param + '</br/>');
}​

$（'.holder'）。制作动画(
{
'end'：100//没有这样的“end”css属性仅用作结束标记
},
{
持续时间：500，
步骤：函数（现在，fx）{
myFunction（now）；//在这里用“now”参数（即ExternalModule.dosomethingusseve（now））调用函数
}
//如果需要，添加属性
}
);
//功能
函数myFunction（参数）{
$（'body'）.append（'Value now:'+param+'
'）；
}​

希望这能有所帮助。

简化jQuery jQuery只有两个easing，linear和swing。您需要的是jQuery UI中使用的函数。可以从

$访问它们

在那里你可以和他们一起玩

您可以通过名称调用任何想要调用的函数。
$.easing.easeOutBounce（e，t，n，r）
。唯一令人困惑的是，它们实际上是4个变量函数。从jQuery UI文档：

基于罗伯特·彭纳

在
f（x，0，0，1）
中使用它们的“标准”方式，因为
e
是我们通常想要更改的变量
n
似乎是大多数函数的“起点”；
t
在许多函数中似乎是一个“幂”，而
r
则是一个线性比例因子

免责声明
通过查看jquery和jQueryUI源文件，这只是我的最佳猜测。我建议，如果你想做的话，你只需要编写你自己的函数，而不是依赖于内部的部分，这些部分当然不是稳定API的一部分

你的放松功能
虽然我不建议做这样的函数，但这是一个有趣的实验

var ease=函数（选项）{
var t=0；
//我们需要一个时间间隔来制作动画
var tstep=options.interval | | 10；
var duration=options.duration | | 500
var i=options.start | | 0；
var end=options.end | | 100；
//缓和功能仅在x=0..1时起作用
var标度=结束-i；
//1除以t步数
var间隔=t步/持续时间；
var easing=options.easing | |“线性”；
var callback=options.execute | | function（）{}；
var timeout=函数（）{
//我们称之为回调，但将我们宽松的规模结果传递给它
回调（标度*$.easing[easing]（Math.min（i，1））；
//如果我们还没有到达动画的末尾，请排队等待另一帧
如果（你使用这个动画的目的是什么？你真的需要更具体一点，帮助我们了解你在这里要做什么。没有必要重新设计轮子，
jQuery的
动画
方法就是为这个做的。@Sheikh Heera当然没有，但我如何将它应用到我的问题上？？？延迟的程度太低了，我正在寻找一个包装，将采取的电话数量，总时间和放松模式，并为我做…只是不知道它是否已经做了
$('.holder').animate(
    {
        'end': 100 // There is no such "end" css property just using as an end mark
    },
    {
        duration: 500,
        step: function(now, fx) {
            myFunction(now); // Call your function here with the "now" param (i.e ExternalModule.DoSomethingUseful(now) ) in your case                      
        }
        // Add easing property if wanted
    }
);

// The function
function myFunction(param){
    $('body').append('Value now: ' + param + '</br/>');
}​

var ease = function(options) {
    var t = 0;
    // we need a time interval for animating
    var tstep = options.interval || 10;
    var duration = options.duration || 500
    var i = options.start || 0;
    var end = options.end || 100;
    // the easing functions only work over x=0..1
    var scale = end - i;
    //  one divided by the number of tsteps
    var interval = tstep/duration;
    var easing = options.easing || 'linear';
    var callback = options.execute || function(){}; 
    var timeout = function() {
        // we call the callback but pass it the scale result of our easing
        callback(scale*$.easing[easing](Math.min(i, 1)));
        // if we haven't reached the end of the animation, queue up another frame
        if (t <= duration) {
            window.setTimeout(function() {       
                 timeout();
            }, tstep);
            i += interval;
            t += tstep;
        }
    };
    timeout();
};

ease({
    start: 0,
    end: 100,
    duration: 900,
    easing: 'easeOutBounce',
    // we'll print to the screen the results of the easing
    execute: function(e) {$('body').append('<p>' + e)}
});