Перерисовка страницы во время выполнения скрипта

@Levabala · Регистрация: 28.06.2013

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function start(){
    for (var i = 0; i <4; i++){setTimeout(starting, 1000, i);}
}
function starting(n){
    if (n == 0) {
        var cb1 = document.getElementById("cb1").checked = true;
        //alert("cb1 отключён!");
        var tx1 = document.getElementById("tx1");
        tx1.innerHTML += " Отмечен!";
    }
    if (n == 1) {
        var cb2 = document.getElementById("cb2").checked = true;
        //alert("cb2 отключён!");
        var tx2 = document.getElementById("tx2");
        tx2.innerHTML += " Отмечен!";
    }
    if (n == 2) {
        var cb3 = document.getElementById("cb3").checked = true;
        //alert("cb3 отключён!");
        var tx3 = document.getElementById("tx3");
        tx3.innerHTML += " Отмечен!";
    }
    if (n == 3) {
        var cb4 = document.getElementById("cb4").checked = true;
        //alert("cb4 отключён!");
        var tx4 = document.getElementById("tx4");
        tx4.innerHTML += " Отмечен!";
    }
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<body onClick="add(0)" onload="start()">
    <h1 align="center" style="color: red">Добавление элементов в <s> Div</s> Textarea</h1>  
    <pre><input type="text" value="textbox" id="tb1" MaxLength="20"><input type="text" value="height" id="tb2" MaxLength="10" size="10" onchange="canvas_wigth()">
    
    <input type='checkbox' onchange="check10(this)" id="cb1" name='value1' value='1'><a id="tx1">Содержимое после первой кнопки</a>
    <input type='checkbox' onchange="check10(this)" id="cb2" name='value2' value='2'><a id="tx2">Содержимое после второй кнопки</a>
    <input type='checkbox' onchange="check10(this)" id="cb3" name='value3' value='3'><a id="tx3">История кликов</a>
    <input type='checkbox' onchange="check10(this)" id="cb4" name='value4' value='4'><a id="tx4">Canvas</a>
    
    <input type="button" value="добавить содержимое textbox в div" onclick="add(1)"> 
    <input type="button" value="продублировать содержимое div" onclick="add(2)">
    </pre><br>
    <ul style="color: green;">Содержимое, добавленное кликом на первую кнопку</ul>
    <ul><textarea rows="20" cols="22    " id="maindiv" readonly="readonly"  onclick="add(3)"></textarea>
    Внимание!!! Справа от нас (мы тут) находится СANVAS!!!
    <canvas id="canvas" width="500" height="320" style="border:3px inset aqua;">
            У вас не поддерживается canvas!!!
    </canvas></ul>
    <ul style="color: darkblue;">Содержимое, добавленное кликом на вторую кнопку</ul>
    <ul><textarea rows="8" cols="60" id="secondul" readonly="readonly"  onclick="add(3)"></textarea></ul>
    <ul style="color: grey;">История кликов (1 - количество всего добавленных элементов 2 - тип клика)</ul>
    <ul><textarea rows="10" cols="60" id="div_value" readonly="readonly"  onclick="add(3)"></textarea></ul>
</body>
</html>

При загрузке страницы запускается функция start(), она вызывает функцию starting(n), в которую передаёт номер checkbox, который нужно отметить. starting(n) включает checkbox и пишет сбоку от него "Отмечен!". Так цикл пробегается по всем четырём чекбоксам. Но отрисовываются всё сделанное после выполнения скрипта

, а мне нужно, чтобы сразу же после задачи параметра!

@newJS · 07.11.2013, 22:08

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

JavaScript
1
2
что то делаем
setTimeout(продолжение, 0);

@Levabala · 08.11.2013, 15:11 **[ТС]**

Спасибо! Решил так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function start(){
    /*for (var i = 0; i <4; i++){*/setTimeout(starting, 1000, i);//}
}
function starting(n){
    if (n == 0) {
        var cb1 = document.getElementById("cb1").checked = true;
        //alert("cb1 отключён!");
        var tx1 = document.getElementById("tx1");
        tx1.innerHTML += " Отмечен!";
        setTimeout(starting, 1000, 1);
    }
    if (n == 1) {
        var cb2 = document.getElementById("cb2").checked = true;
        //alert("cb2 отключён!");
        var tx2 = document.getElementById("tx2");
        tx2.innerHTML += " Отмечен!";
        setTimeout(starting, 1000, 2);
    }
    if (n == 2) {
        var cb3 = document.getElementById("cb3").checked = true;
        //alert("cb3 отключён!");
        var tx3 = document.getElementById("tx3");
        tx3.innerHTML += " Отмечен!";
        setTimeout(starting, 1000, 3);
    }
    if (n == 3) {
        var cb4 = document.getElementById("cb4").checked = true;
        //alert("cb4 отключён!");
        var tx4 = document.getElementById("tx4");
        tx4.innerHTML += " Отмечен!";
    }
}

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .