Является ли моя функция jQuery загружаться слишком медленно?

Question

Я построил контактную форму на своем сайте с кнопкой «Отправить», которая превратится в «Отправка ...», когда вы нажмете на нее. Для этого я использовал Bootstrap JS.

Он сбросит, когда поля

1. пустые
2. адрес электронной почты, при условии, не является действительным
3. что-то пошло не так с сервером
4. форма отсылается

У меня есть div над формой, в которой появятся предупреждения/предупреждения. Тем не менее, он сбрасывает только при отправке формы. Кнопка остается в разделе «Отправка ...» для других трех ситуаций.

Я думал, что это было потому, что кнопка ('reset') даже не вызывалась, но я нажимал кнопку. ('Loading'), где должна была быть кнопка ('reset'), и она работала (удалена исходная кнопка («загрузка») для работы).

Я использую JS для первых трех ситуаций и AJAX для последнего. Я не мог найти здесь ошибку, поэтому у меня есть подозрение, что это может быть связано с тем, что JS (для появления предупреждения/предупреждения) загружается быстрее, чем jQuery (для сброса кнопки). Форма занимает около нескольких секунд для отправки, и когда это происходит, кнопка сбрасывается усердно. Если есть ошибка, предупреждающее сообщение появляется сразу, почти быстрее, чем запуск кнопки «Отправка ...».

Я пытался смотреть на вкладке временной шкалы в разделе Dev инструментов, но я не очень понимаю, что я смотрю на (который относится к коробке, какое действие?)

Теперь я использую 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"). ('Reset'); в начале функции alertGen() и try.if не работает, пожалуйста, скажите мне, что я увижу.