根据变量

Question

我有一个＆＃34;类型＆＃34;标题标题就像在屏幕上输入一样。

只有在我的网站的某个特定部分“活跃”时才会开始输入。或者在屏幕上看到。

目前，outputID也就是输入此文本的区域。运行此函数有两个实例，每个实例都有不同的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);
}

这是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触发器时都会继续输入。结果就是多次写标题，例如：

Get In TouchGet In TouchGet In Touch

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

如何在每个outputID 的ONCE 上运行此功能？因此，一旦使用了outputID，该函数就不能再为该数据运行了吗？

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

mplung的解决方案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

Answer 2

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

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

Answer 3

我想你可以将已处理的outputIds存储到一个数组中，然后在启动之前检查数组中是否存在给定的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
    }
}

Answer 4

您可以在功能开头添加一些检查：

var called = {};

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