9

javascriptループ内で複数のsetTimeoutを呼び出しています。現在、遅延は反復ごとに200ミリ秒ずつ増加するように設定されており、「self.turnpages（）」関数は200ミリ秒ごとに起動します。

ただし、ループが最後の数回の反復に到達し始めると、遅延がさらに離れて関数の起動が遅くなるように、これらの可変遅延に何らかの緩和を適用したいと思います。

var self = this;    
var time = 0; 

for( var i = hide, len = diff; i < len; i++ ) {
                     (function(s){
                             setTimeout(function(){                    
                                        self.turnPages(s);                           
                             }, time);
                       })(i);                                  
             time = (time+200);
}

私はこれから始める方法を完全に失っています。

うまくいけば、誰かが助けることができます。

4

2 に答える 2

10

これは、RobertPennerの緩和方程式の仕事のように聞こえます。ここから元のActionScript2.0バージョンをダウンロードでき（JavaScriptに移植するためのパラメーターの強い型を削除するだけです）、ここにパラメーターの適切な説明があります。

次のようなものはあなたが望むことをします（フィドル）：

var time = 0;
var diff = 30;

var minTime = 0;
var maxTime = 1000;

// http://upshots.org/actionscript/jsas-understanding-easing
/*
    @t is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time [3].
    @b is the beginning value of the property.
    @c is the change between the beginning and destination value of the property.
    @d is the total time of the tween.
*/
function easeInOutQuad(t, b, c, d) {
  if ((t /= d / 2) < 1) return c / 2 * t * t + b;
  return -c / 2 * ((--t) * (t - 2) - 1) + b;
}

function easeOutQuad(t, b, c, d) {
  return -c * (t /= d) * (t - 2) + b;
}

function easeInQuad(t, b, c, d) {
  return c * (t /= d) * t + b;
}

for (var i = 0, len = diff; i <= len; i++) {
  (function(s) {
    setTimeout(function() {
      //self.turnPages(s);                           
      console.log("Page " + s + " turned");
    }, time);
  })(i);

  time = easeInOutQuad(i, minTime, maxTime, diff);
  console.log(time);
}
于 2012-08-22T22:10:15.537 に答える
4

2019年の回答：関数を簡単に実行するために、独自のループタイミングを作成したり、1文字の変数を処理したりする必要はありません。easy-easefromnpmを使用した簡単な例を次に示します。


import ease from 'easy-ease';

ease({
  startValue: 1,
  endValue: 33,
  durationMs: 2000,
  onStep: function(value) {
    console.log(value)
  }
});
于 2019-10-23T11:54:18.700 に答える