如何延時5秒的JavaScript

Question

我有JavaScript函數：

function validateAddToCartForm(object) { 
    value = $(".product-detail-qty-box").val(); 
    if(!isInt(value) || value < 1) { 
      $(".product-detail-error").show(); 
      return false; 
    } else { 
      $(".product-detail-error").hide(); 

      var product_name = $("#product_detail_name").text(); 
      var NewDialog = $('<div id="MenuDialog">\ ' + product_name + '</div>'); 
     NewDialog.dialog({    
      modal: true, 
      title: "title", 
      show: 'clip', 
      hide: {effect: "fadeOut", duration: 1000} 
     }); 

    } 
    return true; 
} 

我需要返回true之前暫停3〜5秒，因爲我想展示了一段新的對話框。我怎樣才能實現這個延遲？

Answer 1

模擬js延遲的唯一方法是超時回調。

變化的函數：

function validateAddToCartForm(object,callback) { 
    value = $(".product-detail-qty-box").val(); 
    if(!isInt(value) || value < 1) { 
      $(".product-detail-error").show(); 
      callback(false); 
    } else { 
      $(".product-detail-error").hide(); 

      var product_name = $("#product_detail_name").text(); 
      var NewDialog = $('<div id="MenuDialog">\ ' + product_name + '</div>'); 
     NewDialog.dialog({    
      modal: true, 
      title: "title", 
      show: 'clip', 
      hide: {effect: "fadeOut", duration: 1000} 
     }); 

    } 
    setTimeout(function() {callback(true);},5000); 
} 

，你叫什麼你應該做的事情，如：

，而不是

function somefunct() { 
    //code before call 
    if (validateAddToCartForm(object)) { 
     //process true 
    } else { 
     //process false 
    } 
    //rest of the function 
} 

地方是這樣的：

function somefunct() { 
    //code before call 
    validateAddToCartForm(object,function(ret) { 
    { 
    if (ret) { 
     //process true 
    } else { 
     //process false 
    }  
    //rest of the function 
    } 
} 

---

在回答你的評論。 我認爲：

• 要防止click事件，如果證實爲假，
• 是您添加的onclick = 「...」 上課 「.clickme」

所有元素元素現在看起來

<input type="submit" onclick="return validateAddToCartForm(this)" class="clickme" /> 

---

所以第一變化的元素

<input type="submit" class="clickme" /> 

添加到您的JavaScript執行以下操作：

//this handle original click, drop it out, and only pass after validation 
$(function() { 
    $('.clickme').click(function (e) { 
     var $t = $(this); 
     //if event triggered return true   
     if (e.isTrigger) return true; 
     validateAddToCartForm(this, function (ret) { 
      if (ret) { 
       $t.trigger('click'); 
      } 
     }); 
     return false; 
    }); 
}); 

我也建議使用窗體本身，而不是 「提交」 事件 「點擊」（the demo of submit）

Answer 2

而是阻塞，您可以在一段時間後使用seTimeout刪除#MenuDialog。

function validateAddToCartForm(o){ 
    var keep_dialog_time = 5 * 1000; // five seconds. 
    // Whatever... 

    /* Use setTimeout(function, milliseconds) to delay deletion of #MenuDialog. 
    This will get executed keep_dialog_time milliseconds after this call, and 
    won't block. */ 
    setTimeout(function(){ 
    $('#MenuDialog').hide(); // maybe there is another function to do this, I'm not a jQuery guy really. 
    }, keep_dialog_time); 
    return true; 
} 

JavaScript是單線程的。這意味着，當你阻止時，你會阻止一切。因此，DOM使用事件循環模型，其中將回調分配給事件。這種模型也存在於node.js中。以上，因爲setTimeout不會阻塞，那個調用後的代碼將繼續運行，而不會等待我們傳遞給setTimeout的函數執行。

我建議深入研究DOM以更好地適應網絡前端編程。您可以使用各種搜索引擎來查找酷文檔。