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

Question

I built a contact form on my site with a "Send" button that will turn into "Sending..." when you click on it. I used Bootstrap JS for that.

It will reset when the

1. fields are blank
2. the email address provided is not valid
3. something went wrong with the server
4. the form is sent

I have a div above the form where the alerts/warnings will appear. However, it only resets when the form is sent. The button stays at "Sending..." for the other 3 situations.

I thought it was because the button.('reset') wasn't even called, but I put button.('loading') where button.('reset') was supposed to be and it worked (removed the original button.('loading') to work).

I use JS for the first 3 situations and AJAX for the last one. I couldn't locate the error here, so I have a suspicion that it could be because the JS (for the alert/warning to appear) loaded faster than the jQuery (for button reset). The form takes about a few seconds to send and when it does, the button resets diligently. If there is an error, the warning message pops up immediately, almost faster than triggering the "Sending..." button.

I've tried looking at the timeline tab in the dev tools section, but I don't really understand what I'm looking at (which box refers to which action?)

Now I use a setTimeout function to reset the button and it works, but I wish to reset it the "proper" way (button resets only after the warning appears).

Can someone guide me through this? Thank you so much!

Sorry, here are the relevant codes:

// 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

With out coding,it will not help us to identify the Error.

But check for these error

1. whether other three event after finished going for the coding part which is changing the button name.
2. Any name changed in other three events.
3. As you have changed the name of button id or class[I am assuming here] as it worked ,check with different name as well as some time same name in other coding part or other js file will make the code to not work.
4. Finally keep alert message box or console message or exception handing to see any error or whether the coding is getting executed .

I have seen the code try placing the $("#bugButton").button('reset'); at the start of alertGen() function and try.if not working please tell me I will see.