Question

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

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

我正在寻找一种方法将缓动应用于执行流程 - 通过提供总持续时间和缓动模式（例如2秒和缓动）。 JS中是否可以使用（我也使用jQuery）？

更新2 更新以澄清问题 - 我正在寻找以下内容：

更新3 - Sheikh Heera是对的，我给出的样本没有说明真正的问题，执行功能更新后调用外部模块，这更接近我所拥有的。我没有看到jQuery的动画如何直接应用于调用函数。

easer.ease({ start: 0, 
   end: 100, 
   duration: 900, 
   easing: "easeOutBounce",
   execute: function (e) { ExternalModule.DoSomethingUseful(e); } });

其中start end是整数，指定动画范围，duration是动画持续时间（以毫秒为单位），easing是用于为a内的值设置动画的缓动模式范围execute - 使用0到100中的值调用的函数，使用上面示例中提供的缓动模式，将myDiv的高度从0设置为{使用100缓动函数在0.9秒内{1}} {1}}

理想情况下，作为一个基于easeOutBounce的小型独立插件，绝对不属于jQuery或任何其他重型打击者的一部分，我无法承担这一点。

Answer 1

如果我正确理解你的问题......你可以尝试使用.delay（100）或.delay（xmilliseconds），这样每一步都需要更长时间。

详细了解延迟：http://api.jquery.com/delay/

Answer 2

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

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

为了工作，您需要在HTML中添加“虚拟”标签并隐藏它。

DEMO：http://jsfiddle.net/vaakash/Wtqm3/

<强> 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/>');
}

希望这有帮助。

Answer 3

在jQuery中缓解

jQuery只有两个缓和，线性和摇摆。您正在寻找的是jQuery UI中使用的函数。可以从$.easing访问它们。

$.easing demo你可以在那里玩。

您可以按名称$.easing.easeOutBounce(e, t, n, r)拨打任何您喜欢的功能。唯一令人困惑的部分是它们实际上是4个变量函数。来自jQuery UI文档：

基于Robert Penner的easing equations

f(x, 0, 0, 1)中e使用它们的“标准”方式是我们通常想要更改的变量。 n似乎是大多数函数的“起点”，t在许多函数中看起来都是“幂”，r是线性比例因子。

声明

这是我查看jquery和jquery-ui源文件的最佳猜测。我建议如果你想做一个简化，你只需要编写自己的函数，而不是依赖于那些肯定不属于稳定API的内部部分。

您的轻松功能

虽然我不建议制作这样的功能，但是一个有趣的实验。 Demo

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)}
});

在JS / JQuery中简化执行流程

3 个答案:

DEMO：http://jsfiddle.net/vaakash/Wtqm3/

在jQuery中缓解

声明

您的轻松功能