Как периодически повторять функцию набора текста JavaScript - PullRequest
Новая
       13

Как периодически повторять функцию набора текста JavaScript

0 голосов
/ 01 октября 2019

Я разработал программу для ввода строки в div. 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <script>
    var i, speed, thraot, disp;
    i = 0;
    speed = 90;
    thraot = "Jesus is Lord, Forever..."
    disp = document.createElement("DIV");
    disp.setAttribute('id', 'mytxt');
    document.body.appendChild(disp);
    disp.innerHTML = "";

    function myTyping() {
      if (i < thraot.length) {
        disp.innerHTML += thraot.charAt(i);
        i++;
      }
      dd = setTimeout(myTyping, speed);
    }

    setInterval(function() {
      myTyping();
    }, speed * thraot.length);
  </script>
</body>

</html>

Я знаю setInterval, который многократно вызывает функцию в определенные миллисекунды, но здесь она не работает.

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

Ответы [ 3 ]

0 голосов
/ 01 октября 2019

Вы пропускаете i = 0 до вызова myTyping внутри setInterval Если вы хотите очистить текущий текст, также сбросьте disp.innerHTML = ""

0 голосов
/ 02 октября 2019

Большое спасибо @ user0103, он изменил мой код на что-то отличное от хорошего.

Как многократно обновлять функцию эффекта ввода снова и снова ... 

<!DOCTYPE html> 
<html> 

<head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 

 <script>
var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

(async function() {
    while(true) {
    for(let i = 0; i < thraot.length; ++i) {
        disp.innerHTML += thraot.charAt(i);
        await sleep(speed);
    }
    await sleep(speed);

    disp.innerHTML = "";
  }
})();

</script>
</body> 

</html>

Это прекрасно работает ...

0 голосов
/ 01 октября 2019

Вы можете сбросить i и ваш div контент в блоке else. 

var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";

function myTyping() {
  if (i < thraot.length) {
    disp.innerHTML += thraot.charAt(i);
    i++;
  } else {
    disp.innerHTML = "";
    i=0;
  }
  dd = setTimeout(myTyping, speed);
}

setInterval(function() {
  myTyping();
}, speed * thraot.length);

ОБНОВЛЕНИЕ: Добавление примера без setInterval(). 

var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);

function myTyping() {
  if (i < thraot.length) {
    disp.innerHTML += thraot.charAt(i);
    i++;
  } else {
    disp.innerHTML = "";
    i=0;
  }
  dd = setTimeout(myTyping, speed * thraot.length);
}

myTyping();
...