Сортировка JavaScript с помощью callbackss

Question

У меня есть несколько ссылок для сортировки текущих элементов на странице.

Функции:

• A - обработчик щелчка с сортировкой массива
• B - отображать элементы в соответствии сотсортированный массив.

Сортировка может занять даже 2 секунды, поэтому я хочу показать некоторую обратную связь с пользователем.

Я думал об изменении текста ссылки на «Выполняется ...» или что-то в этом роде.вот так.

В шутку. Сохраните старый текст ссылки, замените его на «Выполняется» и передайте другую функцию B, которую я вызываю после элементов отображения, чтобы показать старый текст ссылки, но он просто не работает..

В отладчике текст ссылки изменяется, но я все время вижу только старый текст.

Как мне создать для этого действительный обратный вызов?

Я вижу сайты саналогичная сортировка и без обратной связи с пользователем тоже.

Возможно ли это сделать с помощью JavaScript?Или обратная связь может отображаться только по запросу Ajax?

Answer 1

Скорее всего, проблема в том, что вы используете полностью синхронный код.

DOM не обновляется до тех пор, пока не будут запущены какие-либо функциизавершены (даже если вы обновили DOM до длительного расчета).

Вот пример долгосрочного расчета, который препятствует немедленному обновлению DOM. (Нажмите кнопку «Render» вверху, чтобы увидеть пример правильно.)

Обратите внимание на пример, что текст "Starting... Wait a few seconds." появляется немедленно и не блокируется в течение длительного временирасчет.Но текст "Updated" занимает 3 секунды.

Причина этого в том, что я сначала добавил "Starting..." в DOM, а затем завернул остальную часть кода в setTimeout.Это позволило DOM немедленно обновить для "Starting...", но остальная часть кода в setTimeout является синхронной , поэтому DOM не будет обновляться, пока этот код не будетзавершено.

---

Таким образом, ваше решение может состоять в том, чтобы обновить текст с помощью "In progress...", а затем обернуть оставшуюся часть кода в setTimeout(), чтобы позволить DOM немедленно обновиться с вашим сообщением о прогрессе..

element.innerHTML = "In progress...";

setTimeout( function() {
    // invoke the sorting code
}, 0);