Question

我有PHP和ajax创建的联系表单。我想点击Send Message功能中的Sending...按钮更改按钮文本到beforeSend。我想设置按钮时间，直到显示Sending...文本大约5秒钟。我创建了setTimeout函数，如下所示，但不起作用

编辑代码我只在myd done函数中添加了一些条件语句，并在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));

Answer 1

您不需要使用beforeSend。只需将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);

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

修改：这是我认为您想要的快速demo。

Answer 2

Ajax中的beforeSend意味着做你想做的事：在处理jax调用时显示一条消息。

让用户感到困惑的是有一条消息说它正在加载而结果已经存在。

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

Answer 3

更好的策略是仅在经过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
  }
})

提交表单中的beforeSend函数中的jQuery Ajax setTimeout

3 个答案: