javascript - JavaScriptのsetTimeoutを最適化する

Question

これを書くためのより良い方法は何でしょうか：

setTimeout(function() {
    $('#clock').animate({
        'marginTop': '-20px'
    }, 'slow', $.bez(bezierEasing));
}, 100);
setTimeout(function() {
    $('#submit').animate({
        'top': '-5px'
    }, 500, $.bez(bezierEasing));
}, 200);
setTimeout(function() {
    $('#details').animate({
        'top': '-200px'
    }, 500, $.bez(bezierEasing));
}, 300);
setTimeout(function() {
    $('#details').animate({
        'top': '19px'
    }, 100, $.bez(bezierEasing));
}, 600);

Answer 1

関数を作成します。

// adjust your function accordingly...
function animateIt(selector, speed, top) {
   setTimeout(function() {
    $(selector).animate({
     'top': top
    },   speed, $.bez(bezierEasing));
   }, 600);    
}

Answer 2

奇妙なtimeOutチェーンを使用する代わりに、greensock.comのTimelineMaxを使用しない理由。

それははるかに高度で、はるかに使いやすいです。

Answer 3

私のバージョンを捨てるだけです...

function animateEl(selector, css, speed, timer) {
   var tmp = parseInt(speed, 10);
   if (!isNaN(tmp)) {
      speed = tmp;
   }
   return setTimeout(function () {
      $(selector).animate(css, speed, $.bez(bezierEasing) 
   }, timer);
}

animateEl('#clock', {'marginTop': '-20px' }, 'slow',  100);
animateEl('#submit', { 'top': '-5px' }, 500, , 200);
animateEl('#details', { 'top': '-200px' }, 500, 300);
animateEl('#details', { 'top': '19px' }, 100,  600);