Обновите текстовое поле HTML, когда Javascript работает - PullRequest
Новая
       2

Обновите текстовое поле HTML, когда Javascript работает

2 голосов
/ 26 октября 2010

У меня есть HTML-файл, который принимает пользовательские данные, а затем использует Javascript для расчета значения на основе этих входных данных. Этот результат затем отображается в поле ввода после завершения программы.

Я хотел бы сделать так, чтобы при нажатии на кнопку для запуска javascript в поле ввода, отображающем результат, отображалось «Вычисление ...» до тех пор, пока вычисление не завершится (вычисление может занять ~ 5 секунд). Однако, если я поставлю что-то вроде: 

document.getElementById('answer').value = 'Calculating...';

в самом верху моего кода Javascript, кажется, он не обновляет поле ввода при каждом запуске. Вместо этого программа запускается, а затем, наконец, результат обновляется в поле ввода.

Кто-нибудь знает, как я могу обновить поле ввода при запуске программы, а затем обновить его с результатом после завершения программы?

Спасибо!

РЕДАКТИРОВАТЬ: Вот лучшее объяснение моего кода 

<td colspan=1 align=left><input id="button" value="Calculate" onclick=calculate(this.form.type.value,this.form.d.value,this.form.c.value,this.form.freq.value)>
<input id="answer" readonly="true">
</td>
</tr>

function calculate(type,d,c,f) {
    //Performs some calculation
    document.getElementById('answer').value = TS;
}

Ответы [ 4 ]

3 голосов
/ 26 октября 2010

Это происходит потому, что событие перерисовки элемента ответа не произойдет, пока ПОСЛЕ вашего кода JavaScript не будет выполнено (поскольку браузер планирует эти вещи в очереди).

Что вам нужно сделатьдолжен сделать так, чтобы ваш JavaScript прерывал очередь до начала вычислений:

  • Обновите значение до "Вычисление" (помещает перерисовку в конец очереди)

  • Установить таймер с помощью setTimeout() на 0 секунд (при таймере, запускающем код расчета)

  • Когда таймер немедленно отключается, он переводит вызовк коду расчета в конце очереди , после перерисовки элемента. 

    <script>
document.getElementById('answer').value = 'Calculating...';
setTimeout( your_calculation(), 0);
</script>

Таким образом, ваш JavaScriptустановит значение поля, установит таймер и завершит .Затем следующим в очереди является перерисовка элемента ответа;и ТО таймер выключается и запускает логику расчета.

1 голос
/ 26 октября 2010

Вы должны использовать тайм-аут, чтобы интерфейс мог обновиться перед выполнением расчета. 

document.getElementById('answer').value = 'Calculating...'; 

setTimeout( function() { 

    // TODO put your actual calculation statements/function calls here.

    // document.getElementById('answer').value = answer;

}, 0 );
0 голосов
/ 26 октября 2010

что значит на событии onclick? 

<script>
function onReady() {
  document.getElementById('button').click = function() {
    document.getElementById('answer').value = 'Calculating...';
    document.getElementById('answer').value =  doCalculation();
  }
}
</script>
<body unload="onReady()">
0 голосов
/ 26 октября 2010

Мне кажется, что вы устанавливаете значение для элемента, который может еще не существовать на странице.Сначала проверьте, готов ли DOM.

Учебник: http://www.javascriptkit.com/dhtmltutors/domready.shtml

...