jQuery延迟和队列并不总是在window.onhashchange之后运行

Question

此代码似乎完美无缺：

window.onhashchange = function(){
    if (!window.location.href.match('#pop')) {
        //alert('go back last');
        $('#main').removeClass('hidden');
        $('.pop').removeClass('pop-ready');
        $('.pop').addClass('pop-hidden');
    }

    /* navigate back after back button */
    if (!window.location.href.match('#secondpage')) {
        $('#pageCont').removeClass('posTwo');
        $('#pageOne').removeClass('hidden');
        $('#pageTwoInner').addClass('hidden'); 

    }
    if (window.location.href.match('#secondpage')) {
        $('#pageCont').addClass('posTwo');

        $('#pageTwoInner').removeClass('hidden'); 
    }
}; 

然而，当我向一个函数添加延迟和队列时，代码变得不稳定，有时候不会添加该类：

window.onhashchange = function(){
    if (!window.location.href.match('#pop')) {
        //alert('go back last');
        $('#main').removeClass('hidden');
        $('.pop').removeClass('pop-ready');
        $('.pop').addClass('pop-hidden');
    }

    /* navigate back after back button */
    if (!window.location.href.match('#secondpage')) {
        $('#pageCont').removeClass('posTwo');
        $('#pageOne').removeClass('hidden');
                    /* CHANGE HERE */
        $('#pageTwoInner').delay(200).queue(function(){
            $(this).addClass('hidden'); 
        });
    }
    if (window.location.href.match('#secondpage')) {
        $('#pageCont').addClass('posTwo');

        $('#pageTwoInner').removeClass('hidden'); 
    }
}; 

Answer 1

使用queue()时，您必须将下一个项目出列，否则回调链将被破坏。

有两种方法可以实现这一目标。从回调中拨打dequeue()：

$("#pageTwoInner").delay(200).queue(function() {
    $(this).addClass("hidden").dequeue(); 
});

或者调用传递给回调的next参数：

$("#pageTwoInner").delay(200).queue(function(next) {
    $(this).addClass("hidden"); 
    next();
});