Форум

SecretBabka · #1 (**permalink**) 27.01.2016, 14:31

NextIter: function() {
		this.TextIn.innerHTML = '';
		if (this.Iter == this.endIter) { this.End(); };
		for (var abc in this.textArr[this.Iter]) {
				this.Write(this.textArr[this.Iter][abc]);//Должен вывести 1 знак из строки
                                console.log(this.textArr[this.Iter][abc]);
				sleep(100);//Работает правильно, функция отдельно
		};
		this.Iter++;
	},
Write: function(letter) {
		this.TextIn.innerHTML += letter;
	}

В идеале - должен выводить предложение по 1 знаку в 100мс, и в консоли так и есть. Однако текст на самой странице не обновляется, пока не закончится цикл for.
Как это решить?

Dilettante_Pro · #2 (**permalink**) 27.01.2016, 15:04

SecretBabka,
Попробуйте поменять местами функции NextIter и Write
(а вообще трудно сказать, не видя полного текста)

SecretBabka · #3 (**permalink**) 27.01.2016, 15:13

Dilettante_Pro, oт перемены мест слагаемых, как говорится.
Если есть пара минут на чтение, напишите мне вк id330113396

Dilettante_Pro · #4 (**permalink**) 27.01.2016, 16:08

SecretBabka,
От перемены мест зависит определенность функций в момент исполнения - я же и говорю, что трудно судить, не видя полный текст. В вк не состою, со временем туго
Вообще функции, используемые в других функциях, лучше размещать раньше

SecretBabka · #5 (**permalink**) 27.01.2016, 16:21

Dilettante_Pro,
Всё это дело находится в классе, вот в более понятном виде, результат тот же:
В чистом html

<div id="text"></div>
<script>
var TextIn = document.getElementById("text");
var Iter = 0;
var textArr = ["Bla-Bla","Abl-Abl"];

function sleep(ms) {
ms += new Date().getTime();
while (new Date() < ms){}
};
function Write (letter) {
	TextIn.innerHTML += letter;
};
function NextIter() {
		TextIn.innerHTML = '';//Обнуляем текстовое поле
		for (var abc in textArr[Iter]) {
				Write(textArr[Iter][abc]);//Выводим по 1 букве каждые 100мс
				sleep(100);
		};
		Iter++;
};
</script>

Как вариант - пробовал не просто писать текст в div, а создавать для каждой буквы span, и открыл окно разработчика(Chrome).
В итоге создаётся span во время цикла, но на самой странице отображается _после_ цикла.

рони · #6 (**permalink**) 27.01.2016, 16:59

Сообщение от SecretBabka

sleep

создавать такую функцию в js бесполезно, лучше изучите setTimeout https://learn.javascript.ru/settimeout-setinterval
тогда даже for не нужен будет, для выполнения вашей задачи ... увидите setInterval закройте закройте глаза и пропустите текст,

вам нужен только setTimeout

рони · #7 (**permalink**) 27.01.2016, 18:01

SecretBabka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
	<div></div>
	<script>
	 function typeText(d, g, h, e) {
    var a, b, f = performance.now();
    requestAnimationFrame(function k(c) {
        if (!b || !b.length)
            if (b = g.shift()) a = document.createElement("br"), d.appendChild(a), a = document.createTextNode(""), d.appendChild(a), b = b.split("");
            else {
                e && e();
                return
            }
        c = (c - f) / h;
        1 < c && (c = 1);
        1 == c && (f = performance.now(), a.data += b.shift());
        requestAnimationFrame(k)
    })
};
		var div = document.getElementsByTagName("div")[0];
		typeText(div, ["ololo ololo lololo lolo","всяка фигня","Вы прочитали это важное сообщение"], 100, function() {
     alert("УРА!!!");
});
	</script>
</body>


</html>

SecretBabka · #8 (**permalink**) 27.01.2016, 18:16

рони,
Функцию sleep() я задал выше, и она корректно работает сама по себе.
Но спасибо, пришлось во многом поменять код, с интервалом работает.

рони · #9 (**permalink**) 27.01.2016, 18:23

Сообщение от SecretBabka

она корректно работает сама по себе

но эффекта от её применения не будет, бесполезная нагрузка для браузера.

Форум

Справочник

Discord чат

Курсы javascript