Блог

Главная - Вопросы по программированию - Обновить DIV перед интенсивным вычислением

Обновить DIV перед интенсивным вычислением

#javascript #jquery #dom #refresh

#javascript #jquery #дом #обновить

Вопрос:

Это продолжает беспокоить меня, и хотя существует множество вопросов «Обновить DIV с помощью jQuery», ни один из них не затрагивает (то есть не нашел его) этот простой вопрос: как мне обновить (визуальный аспект) DIV перед выполнением некоторых тяжелых вычислений? Идея проста: я создаю большую диаграмму с помощью D3, создание которой занимает пару секунд, и я хочу иметь возможность помещать анимированный gif в overlay перед вычислением и удалять его после. Что — то вроде :

 $("#test").empty();
$("#test").text("Should be seen while waiting");
for (var i=1;i<2000000000;i  ) {
    //Draw heavy SVG in #test that takes time
}
$("#test").empty();
$("#test").text("Ready");
$("#test").css("color", "red");

Просто, но я до сих пор не смог этого сделать: надпись «Должно быть видно во время ожидания» никогда не появляется: (

Простая скрипка здесь демонстрирует поведение: http://jsfiddle.net/StephMatte/q29Gy /

Я попробовал использовать setTimeout и jQuery .delay() в 3 разных браузерах, но безрезультатно.

Спасибо за любой ввод.

Комментарии:

1. На самом деле (я думаю) приведенный выше код действительно выполнит строку $("#test").text("Should be seen while waiting"); , но поскольку он слишком быстрый, на дисплее уже будет отображаться текст «Ready».

2. Взгляните на это jsfiddle.net/q29Gy/4 , Я обновил ваш jsfiddle и смоделировал процесс, требующий нескольких секунд.

3. Насколько я понимаю, на самом деле это не более чем ожидание в течение 10 секунд, не так ли? В настоящее время я смотрю на «функции обратного вызова», на которые, как я полагаю, вы мне указывали, но я не уверен, что понимаю. Не могли бы вы изменить Скрипку так, чтобы между двумя изменениями содержимого в DIV выполнялась фактическая вычислительная работа?

4. Привет, я удалил jsfiddle здесь jsfiddle.net/q29Gy/5 . Что я сделал, так это запросил json-файл и отобразил результат. Я не смог найти файл json большего размера, так что это будет выполнено через совсем немного времени. Но с моей стороны я вижу изменение текста с Loading... на Ready .

5. Спасибо за ваше время. Но, посмотрев на ваш предыдущий код, я понял, что просто использовал неправильный синтаксис для моей функции setTimeout(). Я опубликую свой «ответ» ниже.

Ответ №1:

Попробуйте это-

 box = $("<div>", {'id': 'box'});
$("#test").append(box);

$("#box").text("Should be seen while waiting");
for (var i=1;i<2000000000;i  ) {
//Draw heavy SVG in #test that takes time
}
$("#box").remove();
$("#test").text("Ready");
$("#test").css("color", "red");`

Комментарии:

1. Я не понимаю, что это должно изменить / сделать. Хотя он скрывает начальный ТЕСТ в DIV, он не отображает «Должен быть виден во время ожидания». Возможно, для расследования, но, к сожалению, это не решение.

Ответ №2:

Оказывается, я просто использовал неправильный синтаксис с помощью setTimeout().

Это сделало свое дело :

 $("#test").text("Is seen while generating heavy SVG");

setTimeout(function(){build_chart();}, 100);

$("#test").empty();

10 мс было недостаточно, но 100 мс достаточно, чтобы DIV показал свое новое содержимое перед переходом к вычислениям heay.

Метки: