我的 jQuery 函数加载太慢了吗？

Question

我在我的网站上构建了一个带有“发送”按钮的联系表单，当您点击它时，该按钮会变成“发送...”。为此，我使用了 Bootstrap JS。

会重置

1. 字段为空白
2. 提供的电子邮件地址无效
3. 服务器出了点问题
4. 表格已发送

我在显示警报/警告的表单上方有一个 div。然而，它 仅在发送表单时重置。对于其他 3 种情况，该按钮保持在“Sending...”。

我认为这是因为 button.('reset') 甚至没有被调用，但我将 button.('loading') 放在 button.('reset') 应该在的位置并且它起作用了（删除了原始按钮。（'正在加载'）工作）。

我在前三种情况下使用 JS，在最后一种情况下使用 AJAX。我在这里找不到错误，所以我怀疑这可能是因为 JS（用于出现警报/警告）的加载速度比 jQuery（用于按钮重置）更快。发送表单大约需要几秒钟，当发送时，按钮会努力重置。如果有错误，立即弹出警告信息，几乎比触发“Sending...”按钮快。

我尝试查看开发工具部分中的时间线选项卡，但我不太明白我在看什么（哪个框指的是哪个动作？）

现在我使用 setTimeout 函数重置按钮并且它可以工作，但我希望以“正确”的方式重置它（按钮仅在出现警告后重置）。

有人可以指导我完成这个吗？非常感谢！

抱歉，相关代码如下：

// scripts.js

$("#bugButton").on('click', function() {
    $("#bugButton").button('loading');  
})

function bugReport(bugsField, emailField) {
    if (bugsField.value != '' && emailField.value != '') {
        if (validateEmail(emailField.value) == true) {
            params = "bugsField=" + bugsField.value + "&emailField=" + emailField.value
            request = new ajaxRequest()
            request.open('POST', 'mail.php', true)
            request.setRequestHeader('Content-type','application/x-www-form-urlencoded')

            request.onreadystatechange = function() {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        if (this.responseText != null) {
                            alertGen(this.responseText)
            } } } } 
            request.send(params) 
        } else
            alertGen('errmail');
    } else
        alertGen('errblank');
}

function alertGen(message) {
    msg1 = '<div class="alert alert-'
    msg2 = ' alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'

    if (message == 'success') 
        document.getElementById('response-box').innerHTML = msg1 + 'success' + msg2 + 'Bug report sent!</div>'
    else if (message == 'errblank')
        document.getElementById('response-box').innerHTML = msg1 + 'info' + msg2 + 'Field(s) are blank.</div>'
    else if (message == 'errsend')
        document.getElementById('response-box').innerHTML = msg1 + 'danger' + msg2 + 'Something went wrong. :-(</div>'
    else if (message == 'errmail') 
        document.getElementById('response-box').innerHTML = msg1 + 'danger' + msg2 + 'That is not a valid email address.</div>'
    else 
        document.getElementById('response-box').innerHTML = msg1 + 'info' + msg2 + message + '</div>';

    setTimeout(function () {
        $("#bugButton").button('reset');
    }, 10);
}





// index.html

<div class="modal fade" id="bugsModal" tabindex="-1" role="dialog" aria-labelledby="bugsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div id="response-box" onchange="resetButton()"></div>
        <h3>Report a bug</h3><br>
        <form method="POST">
            <div class="form-group">
                <textarea type="text" class="form-control bugsField" placeholder="What seems to be the problem?" rows="5" maxlength="1000" aria-describedby="bugsField" name="bugsField" value="<?php echo isset($_POST['bugs']) ? $_POST['bugs'] : '' ?>"></textarea>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Email" maxlength="75" aria-describedby="emailField" name="emailField" value="<?php echo isset($_POST['email']) ? $_POST['email'] : '' ?>">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="bugButton" data-loading-text="<i class='fa fa-refresh fa-spin'></i>" onClick="bugReport(bugsField, emailField)" autocomplete="off">Send</button>
              </div>
        </form>

      </div>
    </div>
  </div>
</div>

Answer 1

如果没有编码，它不会帮助我们识别错误。

但是检查这些错误

1. 编码部分完成后是否其他三个事件 这正在更改按钮名称。
2. 在其他三个事件中更改任何名称。
3. 由于您更改了按钮 id 或类的名称[我在这里假设]，因为它起作用了，检查在其他编码部分或其他 js 文件中使用不同的名称以及有时相同的名称将使代码无法工作.
4. 最后保留警报消息框或控制台消息或异常处理以查看任何错误或编码是否正在执行。

我已经看到代码尝试放置 $("#bugButton").button('reset');在 alertGen() 函数开始并尝试。如果不工作，请告诉我，我会看到。