【发布时间】：2020-12-13 19:30:46
【问题描述】：
如何强制解释器/编译器的不同行为
请注意，我是 Javascript 和 HTML 的初学者。我熟悉传统的编译语言，并接触过一些 MVC，因此可能基本缺乏对这种 WebAPI + Javascript 引擎模型如何结合在一起的理解。
我有一段 javascript 旨在慢慢增加显示在
中的文本元素。我正在尝试以超慢的波特率模拟老式的哑终端。
我遇到的问题是，在脚本完成之前，浏览器中的页面似乎不会在视觉上更新。显然，“设计”。请参阅下面的代码，其中我尝试对
的文本字符串进行简单操作元素。
webAPI 如何通过解释器命令执行内容背后肯定有一些科学依据。我需要做的是能够覆盖解释器的行为，以强制它在每次调用后渲染页面以将一些文本添加到
元素。或者，找到不同的方法来做到这一点？我不确定那会是什么？可能是 GIF 或 webAPI 中的一些动画功能。我能找到的最近的是这里->。 https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html 但这似乎需要数学学位，而我只是想管理一些简单的文本字符串
我的代码旨在简单地操作
的文本内容元素，但是......很遗憾，它不起作用，因为在 HTML 调用的排序被一次性呈现之前，首先完成了按字符添加文本字符的循环。
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<p id="textParagraph"></p>
</body>
<script src="script.js"></script>
</html>
Javascript
'use strict';
document.getElementById('textParagraph').textContent = ' ';
let txt = 'some text';
let newStr = '';
let x = 0;
let y = 0;
/*
I am calling a function that recurses because I thought the FOR loop may affect the behavior of how javascript was executing the rendering?! I was wrong! it appears
*/
recurse();
function recurse() {
console.log(x);
newStr = txt.substr(0, x);
console.log(newStr);
addCharToString();
for (y = 0; y <= 100000000; y++) {
let j = (y * y) / 2;
} //I added some delay here in the hope that it may trigger the browser to quickly render the screen ;o)
x++;
if (x <= txt.length) recurse();
}
function addCharToString() {
document.getElementById('textParagraph').textContent = newStr;
console.log(x + ' whilst in addchartostring');
}
alert('mid script');
y = 0; //
secondRecurseTest();
console.log('about to start the next loop...');
for (y = 0; y <= 900000000; y++) {
let j = (y * y) / 2;
}
function secondRecurseTest() {
console.log('inside secondrecurse test');
setTimeout(function () {
console.log('inside delayed functioncall');
}, 1000);
y++;
if (y <= 10) secondRecurseTest();
}
alert('end of script');
【问题讨论】：
-
什么是预期行为...慢打字效果？
-
嘿 Charlietfl，是的.. 就像一台旧的电传机或低波特率的哑终端（绿屏）
-
不应该是硬网络搜索来找到这样的解决方案
-
@charlietfl，嗯，这很难，因为我找不到答案，所以在这里问这个问题。
标签： javascript html dom rendering