Добавить счетчик для ввода в jquery submit

У меня возникли проблемы с добавлением счетчика в мой поиск <form id = "search" class = "form-inline" > <div class = "input-group align-bottom" id = "address_search" > <input type = " text " name = " query " id = " query " placeholder = " search " class = " form-control " > <span class = " input-group-btn " > <button class = " btn btn-primary " type = "submit" > <i id = "search-button" class = "fa fa-search" aria-hidden = "true" > </ i> </ button> </ span> </ div> </ form > m, когда форма отправлена. Счетчик делает $ ( "#search" ). submit ( function () { event . preventDefault (); search = $ ( "# search-button" ) search . removeClass ( "fa-search" ) search . addClass ( "fa-spinner fa-spin" ) // Do Something for ( var i = 0 ; i < 50000 ; i ++) { console . log ( i ) } // Поместить поиск по иконке назад поиск . removeClass ( "fa-search" ) search . addClass ( "fa-spinner fa-pulse " ) }) , но только до тех пор, пока функция не завершится.

Я попытался воспроизвести ошибку, разбив ее на более мелкие части, но безрезультатно. Вот пример кода. Любые указатели будут оценены.

for
setTimeout()

javascript,jquery,html,

1

Ответов: 2

1 принят

Проблема в том, что forцикл является синхронным и блокирует поток пользовательского интерфейса от обновления с добавлением / удалением класса, которое вы сделали.

Решением этого является то, что петля в короткой задержке, например:$("#search").submit(function(e) { e.preventDefault(); var $search = $("#search-button") $search.removeClass("fa-search").addClass("fa-spinner fa-spin") setTimeout(function() { for (var i = 0; i < 50000; i++){ console.log(i) } $search.addClass("fa-search").removeClass("fa-spinner fa-spin") }, 50); })

event

Рабочий пример

Обратите внимание, что вы должны использовать eventпараметр, переданный обработчику события, а не глобальный eventобъект. Кроме того, логика removeClass()/ addClass()была назад после цикла и задала неправильные классы, в которых вы заявляете, что хотите повторно установить fa-searchкласс.

0

Если вы используете Ajax, вы можете использовать что-то вроде следующего:

var $spinner = $('#searchButton').hide();
$(document)
.ajaxStart(function () {
    $spinner.show();
})
.ajaxStop(function () {
    $spinner.hide();
});

ajaxStartИ ajaxStopогонь на ваш звонок Ajax. Подробнее о JQuery ajaxStart и ajaxStop нашли здесь, если они заинтересованы.

JavaScript, JQuery, HTML,
Похожие вопросы
Яндекс.Метрика