在自定義事件中推遲使用JavaScript

我在jQuery插件「jQuery-Steps」中使用onStepChanging事件中的延期完成時遇到了延遲完成的問題。該插件記錄在http://www.jquery-steps.com/。該步驟立即返回而不是等待延期。在我的真實代碼中，我正在進行ajax調用，並且在繼續下一步之前我想等待結果。在自定義事件中推遲使用JavaScript

下面是一些示例代碼：

$(document).ready(function() { 
    var form = $("#form1"); 
    form.children("div").steps({ 
     headerTag: "h3", 
     bodyTag: "section", 
     transitionEffect: "slideLeft", 
     onStepChanging: function(event, currentIndex, newIndex) { 
      $.when(asyncEvent()).then(function(status) { 
       return status; 
      }); 
     } 
    }); 
}); 

function asyncEvent() { 
    var dfd = new $.Deferred(); 

    setTimeout(function() { 
     dfd.resolve(true); 
    }, 2000); 

    return dfd.promise(); 
}

任何幫助，不勝感激！

來源

2015-01-16 Justin Russell

你是ajax太複雜，不能使用[內置異步功能]（http://www.jquery-steps.com/Examples#async）？ – prodigitalson

您能否提供相關標記的片段？ –

您是否使用內置異步功能的ajax太複雜？是的，它比指向URL更復雜。你能否提供相關標記的片段？我不確定我可以提供多少標記以增加價值。 –

立即步驟運行，而無需等待您的推遲，因爲$。當異步運行，並在你的腳本中，返回狀態爲$。當回調不onStepChanging。

我的建議，喲需要回報虛假您onStepChanging事件在默認情況下，和做手工階躍變化..

可能是這樣的

onStepChanging: function(event, currentIndex, newIndex) { 
    $.when(asyncEvent()).then(function(status) { 
     if(status) 
     { 
      if (currentIndex < newIndex) 
      { 
       form.children("div").steps('next'); 
      } 
      else 
      { 
       form.children("div").steps('previous'); 
      } 
     } 
    }); 

    return false; 
}

很抱歉，如果我寫的一些錯誤，我沒有很好地測試這個代碼，我只是閱讀http://www.jquery-steps.com/Examples上的示例，並嘗試瞭解它是如何工作的，但主要想法是默認情況下返回false，並手動執行步驟更改。希望它有所幫助..

來源

2015-01-17 00:37:30

這是一個很好的建議。我給了它一個鏡頭，有兩個問題。首先，當返回false時，會在導航鏈接中添加名爲「error」的CSS類。這很容易通過編輯「錯誤」CSS類來克服。我無法克服的第二個問題 - 即使在通過「下一步」方法更改步驟時，它也會運行「onStepChanging」事件。這會導致無限循環。 –

你的代碼期望異步函數能夠同步返回，這是行不通的。這是一種替代方法，直到承諾完成時將禁止改變步驟：

$(document).ready(function() { 
    var form = $("#form1"); 
    // initialize the return value as false (since you want to wait for your promise to complete) 
    var stepReady = false; 
    form.children("div").steps({ 
     headerTag: "h3", 
     bodyTag: "section", 
     transitionEffect: "slideLeft", 
     onStepChanging: function(event, currentIndex, newIndex) { 
      $.when(asyncEvent()).then(function(status) { 
       stepReady = status; 
      }); 
      return stepReady; 
     } 
    }); 
}); 

function asyncEvent() { 
    var dfd = new $.Deferred(); 

    setTimeout(function() { 
     dfd.resolve(true); 
    }, 2000); 

    return dfd.promise(); 
}

這將是在這種情況下最好直接使用done上返回的承諾，因爲then目的是操縱的狀態。所以，它會改變爲：

onStepChanging: function(event, currentIndex, newIndex) { 
    asyncEvent().done(function(status) { 
     stepReady = status; 
    }); 
    return stepReady; 
}

來源

2015-01-17 00:39:27

我試過了，它仍然會立即進入下一步。 –

在自定義事件中推遲使用JavaScript

回答

相關問題