Блог

Главная - Вопросы по программированию - Как заставить веб-страницу немедленно отображаться во время выполнения javascript?

Как заставить веб-страницу немедленно отображаться во время выполнения javascript?

#javascript #html #dom #rendering

#javascript #HTML #dom #рендеринг

Вопрос:

Как принудительно изменить поведение интерпретатора / компилятора

Обратите внимание, что я новичок в Javascript и HTML. Я знаком с традиционными скомпилированными языками с некоторым воздействием MVC, поэтому, вероятно, это элементарное непонимание того, как эта модель WebAPI Javascript engine работает вместе.

У меня есть фрагмент 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');

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

1. Каково ожидаемое поведение… эффект замедления набора текста?

2. привет, Чарли, да.. как старый телексный аппарат или тупой терминал с низкой скоростью передачи данных (зеленый экран)

3. Не должно быть сложного веб-поиска для поиска таких решений

4. @charlietfl, ну, это сложно, поскольку я не смог найти ответ, поэтому задаю вопрос здесь.

5. Действительно? google.com/search ? q= javascript ввод текста анимация

Ответ №1:

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

  <html>
  <head>
    <link rel="stylesheet" href="stylesheet.css" />
  </head>

  <body>
    <p id="textParagraph"></p>

  <script src="script.js"></script>
  </body>


</html>

Попробуйте и это:

 <html>   
  <head>     
    <link rel="stylesheet" href="stylesheet.css" /> 
  </head> 

  <body>     
    <p id="textParagraph"></p>
    <script src="script.js" defer></script>    
  </body>     
</html>

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

1. Хорошее место Gismo. Я не заметил и даже не подумал о расположении скрипта. Я переместил ее, но, похоже, это не имело никакого значения.

2. Кроме того, я заметил, что другие изменения страницы, внесенные в начале скрипта, и действительно в HTML, где текст <p> сбрасывается, также не применяются! Я предполагаю, что WebAPI / браузер (независимо от того, что выполняет интерпретацию) принимает решения о разумном порядке рендеринга? или я что-то упускаю из виду!

3. @Brianos Добавьте window.addEventListener("load", _youfunction_ ); в свой код. События загрузки позволяют загружать JS после 100% загрузки веб-сайта.

4. Спасибо Gismo, да, я пробовал это. Я также попробовал Document.addEventListener(«DOMContentLoaded», …..

5. тааак….. Я предполагаю, что есть другой способ заставить интерпретатор вести себя по-другому. очевидно, что … это слишком просто, чтобы просто поместить несколько символов в текстовое поле один за другим!! должны быть другие способы исправить это …. но я продолжал исследовать это, потому что это представляет фундаментальный вопрос о том, как интерпретатор для JS работает и интегрируется с webapi?