在JavaScript中編寫相同深度回調的更好方法

Question

我正在編寫一段代碼，使用一個類似animate(params, delay, easing, callback)的簽名的函數（使用RaphaelJS）使HTML元素閃爍三次。想法是callback在delay毫秒之後執行，當動畫結束時。因此，我有以下代碼：

var theElement = anElement; 

function animateOpacity(newOpacity, callback) { 
    theElement.animate({ opacity: newOpacity }, 500, null, callback); 
} 

function blink() { 
    animateOpacity(0.1, function() { 
     animateOpacity(1, function() { 
      animateOpacity(0.1, function() { 
       animateOpacity(1, function() { 
        animateOpacity(0.1, function() { 
         theElement.remove(); 
        }); 
       }); 
      }); 
     }); 
    }); 
    } 

...這看起來很可怕。有沒有人知道一個更好的方式來調用這個相同的animateOpacity函數作爲回調沒有所有這些嵌套的匿名函數？謝謝。

Answer 1

我改變了你這樣的代碼（這就是我所說的回調循環）：

function blink() { 
    var opacities = [0.1, 1, 0.1, 1, 0.1]; 
    animate(opacities, 0); 
} 

function animate(arr, i) { 
    if (i == arr.length) { 
     theElement.remove(); 
     return; 
    } 
    animateOpacity(arr[i], function() { 
     animate(arr, i++); 
    }); 
} 

Answer 2

您可以使用通用代碼和計數器：

function blink(theElement, numBlinks) { 

    var lastOpacity = 0.1; 

    function animateOpacity(newOpacity, callback) { 
     theElement.animate({ opacity: newOpacity }, 500, null, callback); 
    } 

    function next() { 
     --numBlinks; 
     if (numBlinks > 0) { 
      lastOpacity = lastOpacity < 1 ? 1: 0.1; 
      animateOpacity(lastOpacity, next); 
     } else { 
      theElement.remove(); 
     } 
    } 

    animateOpacity(0.1, next); 

} 

Answer 3

結賬jQuery deferred（tutorial)但有

當然，你也可以做這樣的事情（未測試）：

function blink(opacity, count) { 
    opacity = opacity === .1 ? 1 : .1; 
    if(count < 3) { 
     animateOpacity(opacity, blink.bind(null, opacity, ++count)); 
    } 
} 
blink(1, 0); 

Answer 4

你可以使用的setInterval（）或setTimeout的（）函數

http://www.w3schools.com/js/js_timing.asp

更清潔的方式

使用條件進行檢查三次

Answer 5

我會爆炸它在幾種被稱作條件的回調中：

var theElement = anElement, 
    blinksRemaining = 3; 

function animateOpacity(newOpacity, callback) { 
    theElement.animate({ opacity: newOpacity }, 500, null, callback); 
} 
function removeElement() { 
    theElement.remove(); 
} 

function fadeOutThenIn() { 
    blinksRemaining--; 
    animateOpacity(0.1, blink); 
} 

function blink() { 
    animateOpacity(1, blinksRemaining ? fadeOutThenIn : removeElement); 
} 

blink(); 

Answer 6

未經檢驗的，但我覺得有以下應該工作：

var theElement = anElement; 

function animateOpacity(newOpacity, callback) { 
    theElement.animate({ opacity: newOpacity }, 500, null, callback); 
} 

function blink() { 
    var args = [0.1, 1, 0.1, 1, 0.1]; 
    var func = function() { 
     theElement.remove(); 
    }; 
    for (var i = args.length - 1; i >= 0; i--) { 
     func = animateOpacity.bind(null, args[i], func); 
    } 
    func(); 
} 

這裏的想法是從內到外打造的功能，結合內部函數作爲參數傳遞給新的外部函數與其他一起在每一步的論點。

Answer 7

一種可能性是使用conttolling功能與間隔

function blinkingBlinker(newOpacity, callback){ 
    var blink_count = 0; 
    var blink = setInterval(animateOpacity,1000); 

    function animateOpacity(){ 
     blink_count++; 

     function animateOpacity() { 
      theElement.animate({ opacity: newOpacity }, 500, null, callback); 
      } 

     if (blink_count==3){ 
      clearInterval(blink) 
     } 
    }} 

所以，你調用blinkingBlinker功能，直到眨眼次數超過您想眨眼的次數是內部運行animateOpacity每一秒。

Answer 8

眨眼的效果可使用以下的CSS

@-webkit-keyframes blinker { from {opacity:1.0;} to {opacity:0.1;} } 
    @keyframes blinker { from {opacity:1.0;} to {opacity:0.1;} } 
    #element{ 

     text-decoration:blink; 
     -webkit-animation-name:blinker; 
     animation-name:blinker; 
     -webkit-animation-iteration-count:10; 
     animation-iteration-count:10; 
     -webkit-animation-timing-function:cubic-bezier(1.0,0,0,1.0); 
     animation-timing-function:cubic-bezier(1.0,0,0,1.0); 
     -webkit-animation-duration:0.5s; 
     animation-duration:0.5s; 
    } 

被模仿