延遲使用JQuery和Promise

Question

我有一個函數，我想使用deferred並承諾鏈接動畫。

第一個動畫是使用https://github.com/stephband/jticker/blob/master/js/jquery.jticker.js的類型編寫器插件。 第二個是包含其他動畫的函數。

我要做的是運行第一個動畫，動畫完成后，運行第二個動畫。

 $(function () {            
        var ticker =setTimeout(runTicker(), 8000);           
        $.when(ticker).done(function(){
            setTimeout(Other(),16000)});
    });

  function runTicker() {
        $("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");
    }

我嘗試了許多延遲的示例，但仍然無法理解。

我最終清除了所有示例，以使股票行情再次正常運行。

我將如何使用deferred並承諾運行Other（）函數？

謝謝

Answer 1

不知道如何使用適當的基於回調的解決方案來解決實際問題（有關所使用的Ticker插件的信息不足），但是我可以解釋當前代碼中出了什么問題：

var ticker = setTimeout(runTicker(), 8000);

不要立即調用runTicker 。 您想要的是將函數本身（而不是其調用的結果）傳遞給setTimeout 。 將返回一個[plain integer]數字，並將其分配給ticker 。 通過clearTimeout中止超時時，它可用於標識超時-其他地方。

$.when(ticker)...

現在創建一個新的Deferred。 看一下它的文檔 ：它將把Deferred對象彼此結合，並為其他任何值 （例如數字）創建立即解析的Promises。 因此，您done回調也會立即被調用，並且您再次執行Other而不是將其傳遞給setTimeout犯錯。

---

由於您使用的插件在回調方面似乎非常有限，因此我現在編寫了自己的插件（只是為了好玩:-）。 它根據以前的答案改編了我的解決方案， 該答案相當優雅地使用了純DOM方法。 它被編寫為標准jQuery插件，甚至支持stop和go方法，並且-最重要的是-很好地集成在jQuery fx隊列中 。 這意味着您將能夠像animate()在回調和鏈接方面使用它，並且，如果您要使用Deferreds，則可以調用promise()方法以獲取隊列末尾的Promise。 示例調用：

$('#ticker').fadeOut().delay(2000).typewriter({framerate:1000/30}, function() {
    // the typewriter effect has just ended
}). ... .promise().done(function() {
    // effect queue has ended - start Other()
});

jQuery(".stop").click($.fn.typewriter.bind($("#ticker"), "stop"));

→ jsfiddle.net上的代碼

Answer 2

setTimeout顯然不會返回jQuery Deferred對象 ，它是本機Javascript方法。 您需要這樣重寫它：

function runTicker() {
    return jQuery.Deferred(function( promise ) {
        setTimeout(function() {
            $("#ticker").ticker({
                cursorList: " ",
                rate: 50,
                delay: 18000
            }).trigger("play").trigger("stop");

            promise.resolve();
        }, 8000);
    }).promise();
}

然后你可以這樣稱呼它

var ticker = runTicker();

jQuery.when( ticker ).done(function() {
    setTimeout(Other,16000)});
});