[jQuery tech.] 你的 stop() 真的 stop 了嗎

前陣子例用 queue 做了許多東西，慢慢的發現，原生的 stop() 並非我想像中的樣子。

使用任何的動態效果，或是 delay() 這樣的效果，stop() 能使之停止。
使用 queue()，stop() 能使之停止。
stop() 可以傳入兩個布林值，一個是 clearQueue，另一個是 JumpToEnd。

然而，我卻發現事實上並不是這樣。

stop() 僅可停止單一動態動態效果，若連續使用並不會停止後續動作。

例如：$('div').animate( { 'left' : '500px' } ).delay(1000).animate( { 'left' : '0px' } );

使用 stop() 僅會停止紅色的區域，綠色區域會繼續執行，很不幸的，他不會停止！
clearQueue:true 會清除所有關於動態效果的執行動作。

例如：$('div').animate(
{ 'left' : '500px' } ).delay(1000).animate( { 'left' : '0px' } );

使用 stop(true) 停止所有動作，且會停在執行中的結果。但是如果你再次呼叫時，他會從頭開始執行。

問題來了，如果我在 .animate(
{ 'left' : '500px' } ) 之後才按下 stop(true)，然後再次呼叫時，因為會從頭開始執行的關係，所以 .animate(
{ 'left' : '500px' } ) 會再執行一次，這是動態效果中不想見到的，因為看起來會像是沒有在動作一樣（因為已經做完了）。

另外，倘若我在
.animate(
{ 'left' : '0px' } ) 之後按下 stop(true)，然後再次呼叫時，因為從頭開始執行的關係，他會重複上一次的動作，這也是效果中不想見到的，因為應該是繼續最後一個步驟。
JumpToEnd:true 會直接結束該段動態效果，並繼續往下執行。

例如：$('div').animate(
{ 'left' : '500px' } ).delay(1000).animate(
{ 'left' : '0px' } );

使用 stop(false,true) 直接顯示紅色區域的結果，然後綠色區域會繼續執行，很不幸的，他依舊不會停止！
clearQueue:true, JumpToEnd:true 清除所有關於動態效果的執行動作，並結束該段動態效果。
例如：$('div').animate(
{ 'left' : '500px' } ).delay(1000).animate(
{ 'left' : '0px' } );

使用 stop(false,true) 直接顯示紅色區域
的結果，綠色區域會停止執行。但是如果你再次呼叫時，
他會從頭開始執行。問題跟第 2 點一樣，若再次呼叫時，他會從頭開始執行。
jQuery 1.4 之後新增了 .clearQuere()，雖然方便，但是跟 stop() 的問題是一樣的。

接著，我來說一下我所預期的 stop() 是怎麼樣的一個情況：

stop() 應該停止整段動態效果，所以他應該是 clearQueue:true, JumpToEnd:true 的狀態，至於動態執行的階段問題，應該由動態撰寫者自行決定是否重設。
clearQueue:true 應該更謹慎使用！由於會重設整段動態效果，所以執行階段問題一樣是要由撰寫者自行決定是否該重新設定。
JumpToEnd:true 完全誤導使用者對於 stop() 的概念與本身詞意！也許這是很嚴重的指責，但是我不得不這麼說，當你的動作在被按下 stop() 之後，卻被使用者發現還會執行後續動作，這不是很詭譎嗎！
clearQueue:true,
JumpToEnd:true 應該是預設值，而 stop() 應該被修改甚至消滅！
.clearQueue() 並沒有好到哪去。

所以，我們來看看 jQuery 關於 stop() 的核心做了甚麼事情：

stop: function( clearQueue, gotoEnd ) {
        var timers = jQuery.timers;

        /// 剛剛說的，clearQueue: true 時會將整個 queue 清空
        if ( clearQueue ) {
            this.queue([]);
        }

        this.each(function() {
            // go in reverse order so anything added to the queue during the loop is ignored
            for ( var i = timers.length - 1; i >= 0; i-- ) {
                if ( timers[i].elem === this ) {

                    /// 當 JumpToEnd:true 時，會直接結束該段 animate 的 setTimeout
                    if (gotoEnd) {
                        // force the next step to be the last
                        timers[i](true);
                    }

                    timers.splice(i, 1);
                }
            }
        });

        // start the next in the queue if the last step wasn't forced

        /// 誰能告訴我，為什麼 JumpToEnd:false (預設值) 的時候，要執行下一個 queue 內容？
        /// 所以我才說，stop() 這個指令的預設值，完全違背了本身的概念與詞意！

        if ( !gotoEnd ) {
            this.dequeue();
        }

        return this;
    }

現在知道問題點了嗎？這個 stop() 的預設值所表現的行為，應該叫做 stopAndPlay() 才對！

[jQuery tech.] 你的 stop() 真的 stop 了嗎 - 漫談 queue() part 1

Hina Chen

You might also like...