Áp dụng giảm bớt để thiết lập trễ thời gian, trong vòng lặp

Question

Tôi đang gọi nhiều setTimeout trong vòng lặp javascript. Độ trễ hiện được đặt tăng 200ms sau mỗi lần lặp lại, chức năng 'self.turnpages()' sẽ kích hoạt mỗi 200ms.

Tuy nhiên, tôi muốn áp dụng một số loại nới lỏng cho các độ trễ biến này để vòng lặp bắt đầu đạt đến vài lần lặp cuối cùng, độ trễ sẽ bị lệch xa hơn khiến chức năng kích hoạt chậm lại.

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

Tôi đang mất hoàn toàn cách bắt đầu với điều này.

Hy vọng ai đó có thể trợ giúp.

Answer 1

Điều này nghe giống như một công việc cho phương trình nới lỏng của Robert Penner! Bạn có thể tải xuống phiên bản ActionScript 2.0 gốc here (chỉ cần xóa mạnh mẽ nhập vào các tham số để chuyển sang JavaScript) và có giải thích tốt về các tham số here.

Cái gì đó như sau đây sẽ làm những gì bạn muốn (fiddle):

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