javascript - 我的 jQuery 函数加载速度是否太慢？

Question

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

它将重置

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

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

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

前 3 种情况我使用 JS，最后一种情况我使用 AJAX。我在这里找不到错误，所以我怀疑这可能是因为 JS(用于出现警报/警告)加载速度比 jQuery(用于按钮重置)加载得更快。该表单大约需要几秒钟的时间来发送，发送完成后，按钮会不断地重置。如果出现错误，警告消息会立即弹出，几乎比触发“发送...”按钮还要快。

我尝试查看开发工具部分中的时间轴选项卡，但我不太明白我在看什么(哪个框指哪个操作？)

现在我使用 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()函数和try的开始处。如果不起作用，请告诉我，我会看到的。