2

简化 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是用于为范围内的值设置动画的缓动模式， -使用从toexecute的值调用的函数，使用上面示例中提供的缓动模式将使用缓动功能在几秒钟内将 myDiv 的高度从 动画 动画。010001000.9easeOutBounce

理想情况下，作为一个基于 的小型独立插件jQuery，绝对不是Mootools我无法负担的任何其他重量级人物的一部分。

4

3 回答 3

1

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

阅读更多关于延迟的信息： http: //api.jquery.com/delay/

于 2012-11-22T14:43:27.140 回答
1

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

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

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

演示：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/>');
}​

希望这可以帮助。

于 2012-12-01T10:15:01.210 回答
1

jQuery中的缓动

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

$.easing 演示，您可以在其中玩它们。

你可以通过 name 调用任何你想要的函数$.easing.easeOutBounce(e, t, n, r)。唯一令人困惑的部分是它们实际上是 4 个变量函数。来自 jQuery UI 文档：

基于Robert Penner的缓动方程

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

免责声明

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

你的缓动功能

虽然我不建议制作这样的函数，但这是一个有趣的实验。演示。

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)}
});
于 2012-12-01T20:02:57.897 回答