Question

我正在尝试使用Vanilla JS创建一个打字效果，但由于某种原因，charAt函数不起作用，当我用{0}之类的替换i时，它可以正常工作，但即使它被包裹在setTimeout()函数中，它也会立即全部吐出来

＆＃13;

var sentence = document.getElementsByClassName('sentence')[0];
var words = ['websites', 'apps', 'games'];
var speed = 100;

function type(word) {
  for(var i = 0; i < word.length; i++) {
    setTimeout(function() {
      sentence.innerHTML += word.charAt(i);
    }, speed);
  }
}

type(words[0]);

＆＃13;

* {
  font-family: Arial;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor {
  background: #000;
  width: 2px;
  height: 15px;
  animation: blink 1s steps(5, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

＆＃13;

<div class="container">
  <div class="sentence">We make </div>
  <div class="cursor"></div>
</div>

＆＃13;

Answer 1

我非常确定在此代码块中切换超时会解决您的问题。我自己没有能力自己测试它。

A = np.matrix([[3, 4, 3, 1],[1,3,2,6],[2,4,1,5],[3,3,5,2]])

U, i, V = np.linalg.svd(A,full_matrices=True)

Answer 2

使用递归的“异步”循环，因为现在您可以立即启动所有计时器：

ggplot(dat, aes(x = ablat, y = yi, size = 1/vi, col = alloc))+
  geom_point(data = dat, shape = 16) + 
  geom_line(data = dat,aes(x = ablat,y = preds$pred, size = 1))

var sentence = document.getElementsByClassName('sentence')[0];
var words = ['websites', 'apps', 'games'];
var speed = 100;

function type(word) {
   if (!word.length) return; // Nothing to do
   setTimeout(function() {
      sentence.textContent += word.charAt(0);
      type(word.substr(1)); // call recursively only now
   }, speed);
}

type(words[0]);

* {
  font-family: Arial;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor {
  background: #000;
  width: 2px;
  height: 15px;
  animation: blink 1s steps(5, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

Answer 3

您可能希望使用递归，以便每次向innerHtml添加新字母时，它都会启动新的超时。现在它正在同时创建所有超时，因此它们基本上同时点火。

Answer 4

你应该提高速度，因为100非常低，你无法看到它。＆＃34;网站＆＃34;仍在装载800毫秒，所以很难看到任何东西。

不要使用＆＃34;输入＆＃34;作为您的函数名称，因为这是一个保留的jquery函数。

这是它的工作原理：

var sentence = document.getElementsByClassName('sentence')[0];
var words = ['websites', 'apps', 'games'];
var speed = 100;

function typewriter_string(word) {
  sentence.textContent='';
  for(var i = 0; i < word.length; i++) {
      doSetTimeout(i, word);
  }
}

function doSetTimeout(i, word){
    setTimeout(function() {
      sentence.textContent += word.charAt(i);
    }, speed*i);
}

typewriter_string('websites');

在你的代码中，＆＃34; i＆＃34;由于for循环中的setTimeout，因此始终为8。

为什么这个＆＃39; charAt＆＃39;功能工作？

4 个答案: