Javascript Jquery中的延迟操作

我有一个功能，将处理我的网站上的订单结帐。现在我还没有添加任何ajax之类的东西，但我正在尝试使用javascript和引导模式创建一种“加载屏幕”。这就是我所拥有的：

Javascript

function printCheckout() {
    // Show the progress Modal
    $('#myModal').modal({
        keyboard: false,
        backdrop: 'static',
    });
    $('#myModal').modal('show');
    // Billing Information
    $(".stepText").delay(800).html('Processing Billing Information');
    // I want this ^ to delay the process and make it seem longer.
    var name = $("input[name='bill_name']").val();
    var address = $("input[name='bill_address_1']").val() + $(
        "input[name='bill_address_2']").val();
    var city = $("input[name='bill_city']").val();
    var state = $("input[name='bill_state']").val();
    var zip = $("input[name='bill_zip']").val();
    var email = $("input[name='bill_email']").val();
    var phone = $("input[name='bill_phone']").val();
    var billing = 'name=' + name + '&address=' + address + '&city=' + city +
        '&state=' + state + '&zip=' + zip + '&email=' + email + '&phone=' +
        phone;
    // Shipping Informaiton
    $(".stepText").delay(800).html('Processing Shipping Information');
    var name = $("input[name='ship_name']").val();
    var address = $("input[name='ship_address_1']").val() + $(
        "input[name='ship_address_2']").val();
    var city = $("input[name='ship_city']").val();
    var state = $("input[name='ship_state']").val();
    var zip = $("input[name='ship_zip']").val();
    var email = $("input[name='ship_email']").val();
    var phone = $("input[name='ship_phone']").val();
    var shipping = 'name=' + name + '&address=' + address + '&city=' + city +
        '&state=' + state + '&zip=' + zip + '&email=' + email + '&phone=' +
        phone;
    // Payment Information
    $(".stepText").delay(800).html('Processing Payment Information');
    var number = $("input[name='number']").val();
    var expiry_month = $("input[name='expiry_month']").val();
    var expiry_year = $("input[name='expiry_year']").val();
    var cvv = $("input[name='cvv']").val();
    var payment = 'number=' + number + '&expiry_month=' + expiry_month +
        '&expiry_year=' + expiry_year + '&cvv=' + cvv;
    return false;
}

我希望模态显示一些文本，如上面所示，基于我们所处的步骤

Processing Billing Information
Processing Shipping Information
Processing Payment Information

我希望这是延迟，因为现在一旦模态打开它已经在最后一步，这是上面的付款声明

---

我希望我的问题有意义！感谢您的帮助。

最简单的方法是使用超时

function printCheckout() {
    // Show the progress Modal
    $('#myModal').modal({
        keyboard: false,
        backdrop: 'static',
    });
    $('#myModal').modal('show');
    // Billing Information
    $(".stepText").delay(800).html('Processing Billing Information');
    // I want this ^ to delay the process and make it seem longer.
    var name = $("input[name='bill_name']").val();
    var address = $("input[name='bill_address_1']").val() + $(
        "input[name='bill_address_2']").val();
    var city = $("input[name='bill_city']").val();
    var state = $("input[name='bill_state']").val();
    var zip = $("input[name='bill_zip']").val();
    var email = $("input[name='bill_email']").val();
    var phone = $("input[name='bill_phone']").val();
    var billing = 'name=' + name + '&address=' + address + '&city=' + city +
        '&state=' + state + '&zip=' + zip + '&email=' + email + '&phone=' +
        phone;
    // Shipping Informaiton
    $(".stepText").delay(800).html('Processing Shipping Information');
    var name = $("input[name='ship_name']").val();
    var address = $("input[name='ship_address_1']").val() + $(
        "input[name='ship_address_2']").val();
    var city = $("input[name='ship_city']").val();
    var state = $("input[name='ship_state']").val();
    var zip = $("input[name='ship_zip']").val();
    var email = $("input[name='ship_email']").val();
    var phone = $("input[name='ship_phone']").val();
    var shipping = 'name=' + name + '&address=' + address + '&city=' + city +
        '&state=' + state + '&zip=' + zip + '&email=' + email + '&phone=' +
        phone;
    // Payment Information
    $(".stepText").delay(800).html('Processing Payment Information');
    var number = $("input[name='number']").val();
    var expiry_month = $("input[name='expiry_month']").val();
    var expiry_year = $("input[name='expiry_year']").val();
    var cvv = $("input[name='cvv']").val();
    var payment = 'number=' + number + '&expiry_month=' + expiry_month +
        '&expiry_year=' + expiry_year + '&cvv=' + cvv;
    return false;
}

如果您使用的是Bootstrap 3

事件是名称空间，modal的

show

事件是

show.bs.modal

有关更多详细信息，请参阅

您的代码应该如下所示：

$('#myModal').on('show.bs.modal', function (e) {
     // your script
})

演示：

您应该使用

setTimeout(function(){

// Whatever code to give delay of 3s

},3000);

---

我将printCheckout函数中的每个“块”（查看块中的注释）包装成一个单独的setTimeOut函数，现在它没有继续更改文本？进一步检查，我注意到它显示未定义

setTimeOut

。哎呀，我的坏消息是

setTimeOut（function（）{…}，3000）

，small

O

您应该考虑使用bootstrap3事件，以防模式下拉失败，您的代码不会被触发。