如何在Typed.js渲染字符串时添加每段内容打字前的暂停设置

解决方法 #

你要实现的退格删除完成后、新字符串开始打字前的停顿，直接用Typed.js内置的暂停标记语法就能实现，无需额外引入其他依赖或写复杂逻辑：

• Typed.js支持在字符串任意位置插入^[毫秒数]标记，打字执行到该位置时会自动暂停对应时长
• 你只需在每段字符串的最开头添加该标记，即可实现开始打对应内容前的停顿效果

比如你要每次停顿2秒（2000毫秒），只需修改strings数组配置即可，修改后的完整JS代码如下：

document.addEventListener('DOMContentLoaded', function(){
      Typed.new('.type', {
        // 每个字符串开头加^2000，代表开始打该词前先暂停2000毫秒
        strings: ["^2000neighbor", "^2000family", "^2000team", "^2000community"],
        stringsElement: null,
        // typing speed
        typeSpeed: 60,
        // time before typing starts
        startDelay: 600,
        // backspacing speed
        backSpeed: 20,
        // 该参数是打完一个词后等待多久开始退格，可按需调整
        backDelay: 500,
        // loop
        loop: true,
        // false = infinite
        loopCount: false,
        // show cursor
        showCursor: false,
        // character for cursor
        cursorChar: "|",
        // attribute to type (null == text)
        attr: null,
        // either html or text
        contentType: 'html',
      });
  });

你可以根据自己的需求调整^后的数字，单位为毫秒，比如填3000就是停顿3秒。

内容的提问来源于stack exchange，提问作者Behseini