JSFiddle - React, Tailwind, and code Playground

by Ben Alman

JavaScript

var start = new Date();

$('body')
    .delay( 3000 )
    .queue(function(next){
        // this should log ~500ms
        log( 'a', new Date() - start );
        setTimeout( next, 3000 );
    })
    .queue(function(next){
        // this should log ~3500ms
        log( 'b', new Date() - start );
        setTimeout( next, 3000 );
    })
    .queue(function(next){
        // this should log ~6500ms
        log( 'c', new Date() - start );
        setTimeout( next, 3000 );
    })
    .queue(function(next){
        // this should log ~9500ms
        log( 'd', new Date() - start );
        setTimeout( next, 3000 );
    });

setTimeout(function(){
    
    // This should stop the .delay() call in mid-execution
    // after 500ms, causing logging to begin immediately,
    // then continue normally every 3000ms.
    
    // When the .delay() call is currently stopped, the next
    // queued effects method is executed immediately (per
    // the spec) but since the .delay()-created  internal 
    // anon function (passed to setTimeout) is not cleared,
    // it ALSO executes.
    $('body').stop();
    
}, 500 );

function log() {
    $('body').append( [].join.call( arguments, ', ' ) + '<br/>' );
}