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

Question

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

只有当我网站的特定部分“事件”或在屏幕上看到时，打字机才会开始输入。

目前，它采用outputID，也就是将输入该文本的区域。此函数有两个实例正在运行，每个实例都有不同的 outputID - 我只希望该函数每个 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);
}

这是textTyping函数

function textTyping(outputID){
        $(outputID).show();
        var textString = $(outputID).data("text");
        var textArray = textString.split("");
        var texttypeing = setInterval(
            function() {
                typeOutText(outputID,textArray);
            }, 170);

        function typeOutText(outputID,textArray) {
            if (textArray[0] == "^"){
                outputID.text(function(index, text){
                    return text.replace(/(\s+)?.$/, '');
                });
                textArray.shift();
            }else {
                if (textArray.length > 0) {
                    outputID.append(textArray.shift());
                } else {
                    clearTimeout(texttypeing);
                }
            }
        }
    }

我目前的问题是该函数运行多种类型，并且每次实现原始 anchorLink 触发器时都会继续键入。结果是多次写入标题，例如:

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

每次导航到该部分时，都会重新开始输入。

如何才能每个outputID 仅运行此函数一次？那么一旦使用了outputID，该函数就不能再针对该数据运行？

JSFiddle 非工作示例:https://jsfiddle.net/qLez8zeq/

mplungjan 解决方案的 JSFiddle:https://jsfiddle.net/qLez8zeq/1/

Answer 1

改变

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

至

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

FIDDLE