Typed.js - 如何多次调用函数onClick答案

【问题标题】：Typed.js - how to call function onClick multiple timesTyped.js - 如何多次调用函数onClick
【发布时间】：2015-07-23 21:26:28
【问题描述】：

我正在使用typed.js。

我想在单击按钮时运行一个函数。但我只能让typed 函数在第一次点击时工作一次。

$(function(){
    var options = {
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
    }
    $("button").click(function(){
        $(".element").typed(options);
    });
});

例如看这个小提琴：http://jsfiddle.net/mattboldt/tcRUG/

【问题讨论】：

您单击按钮启动键入的插件。再次单击没有效果，因为插件已经在运行。您在这里期待什么行为？
@RoryMcCrossan 让它重置并再次触发。我尝试了var typed = new Typed();，但无法让它工作。我认为应该是这样的

标签： javascript jquery html jquery-plugins

【解决方案1】：

Type.js 没有提供任何方法。我尝试使用它的 api，但它在任何地方都使用 seTimeout 并且行为异步并且没有给出任何承诺/延迟对象。为了让它工作，一种解决方案是删除元素并重新创建。我个人不喜欢这个解决方案，看起来很老套，但它可以完成工作

$(function(){
    var options = {
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0,
        callback: function(){
            var x = $(".element").text();
            $("#maindiv").html("");
            $("#maindiv").append('<span class="element">'+x+'</span>');
        }
    }
    $("button").click(function(){ 
        $(".element").text('');
       $(".element").typed(options);        
    });
});

在 HTML 中

<div id="maindiv"><span class="element"></span></div>
<button>Type!</button>

【讨论】：

谢谢，是的，它很hacky，但它可以工作。我本来希望 API 支持这样的东西。

【解决方案2】：

我最近遇到了类似的问题。我实现了答案，但我也希望前一个字符串“坚持”。

例如，onclick 我想在输入新字符串之前先退格上一个字符串。

我将此添加到 init of typed

// Set the default string
if(self.isDefaultString) {
    self.strPos = self.strings[self.sequence[self.arrayPos]].length;

    if (self.isInput) {
        self.el.val(self.strings[self.sequence[self.arrayPos]]);
    } else if (self.contentType === 'html') {
        self.el.html(self.strings[self.sequence[self.arrayPos]]);
    } else {
        self.el.text(self.strings[self.sequence[self.arrayPos]]);
    }
}

这到何时启动类型化对象

// default string of text
this.isDefaultString = this.options.isDefaultString;

然后实现这样的类型

$("#contact header b").typed({
     strings: ["s1", "s2"],
     isDefaultString: true,
     typeSpeed: 30,
     startDelay: 250,
     showCursor: false
});

结果是我会从屏幕上的字符串“s2”开始，然后输入会删除它并输入“s1”。

这很有用，因为如果您想稍后在单击时键入。您可以将默认设置为“s2”。然后键入将删除“s2”并打印“s3”。

【讨论】：