提交表单期间，在beforeSend函数中使用jQuery Ajax setTimeout

我有一个由PHP和ajax创建的联系人表单。当我点击

Send Message

按钮时，我想在

beforeSend

功能中将按钮文本更改为

Sending…

。我想设置按钮的时间，直到显示我

发送…

文本大约5秒。我创建了setTimeout函数，如下所示，但不起作用

编辑代码只有我在myddone函数中添加了一些条件语句，并且在complete函数中添加了一些代码

(function (jQuery, window, document, undefined) {
'use strict';

jQuery('#contactForm').submit(function(event) {

    var bsnname = jQuery('#bsnname').val();
    var bsnsubject = jQuery('#bsnsubject').val();
    var bsnemail = jQuery('#bsnemail').val();
    var bsnmessage = jQuery('#bsnmessage').val();

    jQuery.ajax({
        url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
        type: 'POST',
        data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage},
        dataType: 'json',
        cache: false
    })
    .done(function(data) {
        if (!data.success) {
            if(data.errors.nameEmpty) {
                jQuery('#name-field').append('<em class="text-danger">' + data.errors.nameEmpty + '</em>');
            } else {
                jQuery('#name-field .text-danger').fadeOut(25);
                if(data.errors.nameLengthErrors) {
                    jQuery('#name-field').append('<em class="text-danger">' + data.errors.nameLengthErrors + '</em>');
                }
            }
            if(data.errors.subjectEmpty) {
                jQuery('#subject-field').append('<em class="text-danger">' + data.errors.subjectEmpty + '</em>');
            } else {
                jQuery('#subject-field .text-danger').fadeOut(25);
                if(data.errors.subjectLengthErrors) {
                    jQuery('#subject-field').append('<em class="text-danger">' + data.errors.subjectLengthErrors + '</em>');
                }
            }
            if(data.errors.emailEmpty) {
                jQuery('#email-field').append('<em class="text-danger">' + data.errors.emailEmpty + '</em>');
            } else {
                jQuery('#email-field .text-danger').fadeOut(25);
                if(data.errors.emailFormatErrors) {
                    jQuery('#email-field').append('<em class="text-danger">' + data.errors.emailFormatErrors + '</em>');
                }
            }
            if(data.errors.messageEmpty) {
                jQuery('#message-field').append('<em class="text-danger">' + data.errors.messageEmpty + '</em>');
            } else {
                jQuery('#message-field .text-danger').fadeOut(25);
                if(data.errors.messageLengthErrors) {
                    jQuery('#message-field').append('<em class="text-danger">' + data.errors.messageLengthErrors + '</em>');
                }
            }
        } else {
                jQuery('#success-msg').append('<p class="bg-success">Message has been sent</p>');
        }

    })
    .fail(function(data) {
    });

    jQuery(document).ajaxComplete(function() {
        document.getElementById("contactForm").reset();
    });

    event.preventDefault();
});
}(jQuery, window, document));

（函数（jQuery、窗口、文档、未定义）{
"严格使用",；
jQuery（“#contactForm”）.submit（函数（事件）{
var bsnname=jQuery（'#bsnname'）.val（）；
var bsnsobject=jQuery（'#bsnsobject'）.val（）；
var bsnemail=jQuery（'#bsnemail'）.val（）；
var bsnmessage=jQuery（'#bsnmessage'）.val（）；
jQuery.ajax({
网址：'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
键入：“POST”，
数据：{'bsnname'：bsnname，'BSNSObject'：BSNSObject，'bsnemail'：bsnemail，'bsnmessage'：bsnmessage}，
数据类型：“json”，
缓存：false
})
.完成（功能（数据）{
如果（！data.success）{
if（data.errors.namempty）{
jQuery（“#名称字段”）.append（“”+data.errors.namempty+“”）；
}否则{
jQuery（'#name field.text danger'）.fadeOut（25）；
if（data.errors.namelingtherrors）{
jQuery（“#名称字段”）.append（“”+data.errors.namelingtherrors+“”）；
}
}
if（data.errors.subjectEmpty）{
jQuery（“#主题字段”）.append（“”+data.errors.subjectEmpty+“”）；
}否则{
jQuery（“#subject field.text danger”）.fadeOut（25）；
if（数据.错误.主题长度错误）{
jQuery（“#主题字段”）.append（“”+data.errors.subjectLengthErrors+“”）；
}
}
if（data.errors.emailEmpty）{
jQuery（“#email字段”）.append（“”+data.errors.emailEmpty+“”）；
}否则{
jQuery（“#email field.text danger”）.fadeOut（25）；
if（data.errors.emailFormatErrors）{
jQuery（“#电子邮件字段”）.append（“”+data.errors.emailFormatErrors+“”）；
}
}
if（data.errors.messageEmpty）{
jQuery（“#消息字段”）.append（“”+data.errors.messageEmpty+“”）；
}否则{
jQuery（“#message field.text danger”）.fadeOut（25）；
if（data.errors.messageLengthErrors）{
jQuery（“#消息字段”）.append（“”+data.errors.messageLengthErrors+“”）；
}
}
}否则{
jQuery（“#success msg”）.append（“
消息已发送
”）；
}
})
.失败（功能（数据）{
});
jQuery（文档）.ajaxComplete（函数（）{
document.getElementById（“contactForm”）.reset（）；
});
event.preventDefault（）；
});
}（jQuery、窗口、文档）；

发送前不需要使用

。只需将AJAX函数包装在

setTimeout

回调函数中，如下所示

jQuery('button').text("Sending...");

setTimeout(function () {
    jQuery.ajax({
        url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
        type: 'POST',
        data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage},
        dataType: 'json',
        cache: false,
        success: function (data) {
            // Some code here work correctly
        },
        error: function () {
            // Some bug messages
        },
        complete: function () {
            // good place to change the button back to its original text
        }
    });
}, 5000);

但你应该问自己的最大问题是：这样做有什么意义？您只想延迟更改按钮文本的请求

---

编辑：以下是我认为您需要的快速信息。

发送前无需使用

。只需将AJAX函数包装在

setTimeout

回调函数中，如下所示

jQuery('button').text("Sending...");

setTimeout(function () {
    jQuery.ajax({
        url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
        type: 'POST',
        data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage},
        dataType: 'json',
        cache: false,
        success: function (data) {
            // Some code here work correctly
        },
        error: function () {
            // Some bug messages
        },
        complete: function () {
            // good place to change the button back to its original text
        }
    });
}, 5000);

但你应该问自己的最大问题是：这样做有什么意义？您只想延迟更改按钮文本的请求

---

编辑：以下是我认为您需要的内容。

Ajax中的beforeSend旨在实现您想要的功能：在处理jax调用时显示消息

如果用户收到一条消息说它正在加载，而结果已经存在，这会让用户感到困惑

---

我认为在这种情况下不应该使用setTimeout函数…

Ajax中的beforeSend是为了做您想要做的事情：在处理jax调用时显示消息

如果用户收到一条消息说它正在加载，而结果已经存在，这会让用户感到困惑

---

我认为在这种情况下不应该使用setTimeout函数…

一个更好的策略是仅在经过

x

时间后显示加载。如果用户的连接/下载速度很快，并且在连接速度较慢时收到正确的通知，那么用户将立即体验到满足感，而不会出现预加载程序的任何故障闪烁

const url = 'https://555'
const data = {foo: bar}
const preloaderTimeout

$.ajax({
  url,
  data,
  beforeSend: () => {
    preloaderTimeout = setTimeout(showLoader, 500)
  },
  success: (data) => {
    clearTimeout(preloaderTimeout)
    ...do stuff w/data
  }
})

---

一个更好的策略是，仅在

x

时间流逝时显示加载。如果用户的连接/下载速度很快，并且在连接速度较慢时收到正确的通知，那么用户将立即体验到满足感，而不会出现预加载程序的任何故障闪烁

const url = 'https://555'
const data = {foo: bar}
const preloaderTimeout

$.ajax({
  url,
  data,
  beforeSend: () => {
    preloaderTimeout = setTimeout(showLoader, 500)
  },
  success: (data) => {
    clearTimeout(preloaderTimeout)
    ...do stuff w/data
  }
})

---

我有点不明白你在做什么。但是setTimeout会将更改延迟5秒，这看起来很奇怪。我会在发送之前将按钮更改为sending inside，然后使用ajax请求的回调将其更改为Send或其他内容。我希望在单击Send message按钮时更改发送的文本。。。在显示成功消息后，显示大约5秒钟。（成功消息可以正确地与我一起工作，但我希望延迟大约5秒钟）为什么不在响应通过后立即更改文本？您正在寻找的是将按钮文本设置为发送。。。正如你在你的代码中没有超时，然后有一个settimeout，它会在五秒钟后更改回来。哦，如果有错误，也会显示发送。。。文本。如果你能帮我编辑我的代码。我要送表演。。。如果一切正常，并且没有任何e，则发送文本