Javascript 根据变量检查函数之前是否已完全运行

我有一个函数，可以“键入”标题，就像在屏幕上键入一样

只有当我的网站的某个特定部分处于“活动”状态或显示在屏幕上时，打字机才会开始打字

目前，它使用

outputID

aka作为输入文本的区域。此函数有两个实例正在运行，每个实例都有不同的

outputID

s-我只希望函数每个outputID运行一次

这就是函数最初的调用方式

<h2 id="typer-get-in-touch" class="typer" data-text="Get in Toche^^^^^ Touch"></h2>

if(anchorLink == 'contact'){
    var outputID = $("#typer-get-in-touch");
    textTyping(outputID);
}else if(anchorLink == 'expertise'){
    var outputID = $("#typer-expertise");
    textTyping(outputID);
}

我目前的问题是，该函数运行多种类型，并且每次实现原始的

anchorLink

触发器时都会继续键入。结果是，is多次写入标题，例如：

取得联系取得联系取得联系

每次导航到该节时，都会再次开始键入

如何在每个输出ID中仅运行此函数一次？因此，一旦使用了outputID，函数就不能再为该数据运行了

JSFIDLE非工作示例：

---

mplungjan解决方案的JSFiddle:我想您可以将处理后的outputId存储到一个数组中，然后在开始之前检查数组中是否存在给定的outputId

定义数组，检查是否存在，如果未找到，请执行代码示例：

var processedIds = [];

function textTyping(outputID) {
    var foundItem = false;
    for (var i = 0; i < processedIds.length; i++)
    {  
       if (processedIds[i] == outputID) {
         foundItem = true;
         break;
       }
    }

    if (!foundItem) {
       //the rest of your code goes here
    }
}

var processedds=[]；
函数文本类型（outputID）{
var foundItem=false；
对于（var i=0；i

更改

function textTyping(outputID){ 
    $(outputID).show();
    var textString = $(outputID).data("text");

到

---

您可以在函数开头添加一些检查：

var called = {};

function textTyping(outputID) {
    if (called[outputID]) {
        return;
    }
    called[outputID] = true;
    // your code
}

---

您需要做的是为每个ID绑定事件处理程序，然后在第一次触发后解除绑定。由于您已经在使用jQuery，因此可以使用为每个输出ID执行以下操作：

$( "#typer-get-in-touch" ).one( "click", function() {
   textTyping(outputID);
});

---

外部变量/去Bouncing/throttling不会为您提供100%的保护，处理异步内容的唯一方法是使用承诺/回调。您可以发布一个示例吗？“此函数有两个实例正在运行，每个实例具有不同的outputID”可以包括问题中每个

outputID

的

html

？谢谢，我已经创建了一个JSFIDLE，但我也在OP中包含了您的解决方案，以防有人想使用源代码创建自己的打字机。如果您查看我的JSFIDLE来寻找您的解决方案，如果您双击（又称快速运行函数两次），那么它将键入两次并以一个混乱的短语结束。我想我需要在函数开始输入后立即停止它再次运行。非常感谢。在整个文本“完成”并键入后，我如何触发，例如额外的动画？我不确定我是否理解。由于您正在将所需内容复制到textarray中，因此不再需要数据文本。如果你有更多的东西，也可以这样做，或者创建一个JavScript符号和JSON.parse：

data text='{“text”：“进入Toche^^^^^^^Touch”，“image”：“typing.gif”}>

对不起，我的意思是当键入完成时，我试图触发另一个函数/动画。setinterval多次运行该函数，因此我尝试挂接它上次运行的时间，以便确认键入动画已完全完成。

var called = {};

function textTyping(outputID) {
    if (called[outputID]) {
        return;
    }
    called[outputID] = true;
    // your code
}

$( "#typer-get-in-touch" ).one( "click", function() {
   textTyping(outputID);
});