Javascript 如何在第一次迭代后停止此电传打字动画？

我正在使用jquery进行打字，找到了这段代码，并对其进行了编辑，使其能够完美地工作

但是，我有一个问题，我不能停止循环

我试图检测最后一段是否已打印，这样我就可以在之后添加一个函数，而不会有任何运气

感谢您的建议和提示

代码是：

（函数（$）{
函数类型字符串（$target，str，cursor，delay，cb）{
$target.html（函数（\ux，html）{
返回html+str[cursor]；
});
如果（光标1）{
setTimeout（函数（）{
deleteString（$target，delay，cb）；
}，延误）；
}
否则{
cb（）；
}
}
//jQuery钩子
$.fn.extend({
电传打字机：功能（opts）{
var设置=$.extend（{}，$.teletype.defaults，opts）；
返回$（this）.each（函数（）{
（函数循环（$tar，idx）{
//类型
typeString（$tar，settings.text[idx]，0，settings.delay，function（）{
//删除
setTimeout（函数（）{
deleteString（$tar，settings.delay，function（）{
循环（$tar，（idx+1）%settings.text.length）；
});
}，设置。暂停）；
});
}（$（本），0））；
});
}
});
//插件默认值
$扩展({
电传打字机：{
默认值：{
延误：100，
暂停：5000，
案文：[]
}
}
});
}（jQuery））；
$（'#target'）。电传打字({
正文：[
“Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，”，
“在劳动和就业方面的临时不可抗力”，
“在vero eos等地的大教堂里，一座巨大的教堂”
]
});
$（'#光标'）。电传打字({
正文：[“uuu”，“uu”]，
延迟：0，
暂停：500
});

您需要从

setTimeout（）

获取处理程序，并使用该处理程序运行

clearTimeout（）

var handler = setTimeout(function () {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
....
clearTimeout(handler);

编辑：我修改了你的代码来解释应该在哪里设置停止例程

检查此链接：

你需要再清理一下你的逻辑。光标应该按选项分隔或设置，因为您要停止用于闪烁光标的循环

(function ($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void

  var handler1, mycount=0, handler2, handler3;
  function typeString($target, str, cursor, delay, cb) {
    $target.html(function (_, html) {
      return html + str[cursor];
    });
    //alert('cursor:'+cursor);
    //alert('str.length:'+str);
    if (cursor < str.length - 1) {
      handler1 = setTimeout(function () {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

  // clears the string
  //
  // @param jQuery $target
  // @param Numeric delay
  // @param Function cb
  // @return void
  function deleteString($target, delay, cb) {
    var length;

    $target.html(function (_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      handler2 = setTimeout(function () {
        deleteString($target, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

  // jQuery hook
  $.fn.extend({
    teletype: function (opts) {
      var settings = $.extend({}, $.teletype.defaults, opts);
      $(this).each(function () {
mycount=0;
        (function loop($tar, idx) {
        mycount ++;
          // type
          typeString($tar, settings.text[idx], 0, settings.delay, function () {
            // delete
            clearTimeout(handler1);
            handler3 = setTimeout(function () {
              deleteString($tar, settings.delay, function () {
                if (mycount<settings.text.length) {
                  loop($tar, (idx + 1));} else {
clearTimeout(handler3);
                    alert('The end!');
                  }
              });
            }, settings.pause);
          });

        }($(this), 0));
      });

    }
  });

  // plugin defaults  
  $.extend({
    teletype: {
      defaults: {
        delay: 100,
        pause: 5000,
        text: []
      }
    }
  });
}(jQuery));

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et'
  ]
});
/*
$('#cursor').teletype({
  text: ['_', ' '],
  delay: 0,
  pause: 500
});
*/

（函数（$）{
//写入字符串
//
//@param jQuery$target
//@param字符串str
//@param数值光标
//@param数字延迟
//@param函数cb
//@返回无效
变量handler1，mycount=0，handler2，handler3；
函数类型字符串（$target，str，cursor，delay，cb）{
$target.html（函数（\ux，html）{
返回html+str[cursor]；
});
//警报（“光标：”+光标）；
//警报（'str.length:'+str）；
如果（光标1）{
handler2=setTimeout（函数（）{
deleteString（$target，delay，cb）；
}，延误）；
}
否则{
cb（）；
}
}
//jQuery钩子
$.fn.extend({
电传打字机：功能（opts）{
var设置=$.extend（{}，$.teletype.defaults，opts）；
$（此）。每个（函数（）{
mycount=0；
（函数循环（$tar，idx）{
mycount++；
//类型
typeString（$tar，settings.text[idx]，0，settings.delay，function（）{
//删除
clearTimeout（handler1）；
handler3=setTimeout（函数（）{
deleteString（$tar，settings.delay，function（）{
if（mycount您可以添加一个参数来停止动画的循环，并将另一个参数设置为在动画结束时调用的回调。我们分别说
永远
和
结束

// plugin defaults  
$.extend({
  teletype: {
    defaults: {
      delay: 100,
      pause: 5000,
      text: [],
      forever: true,
      end: $.noop
    }
  }
});

将
forever
设置为
true
将使动画无限期地继续，并在到达最后一个元素后从
text
的第一个元素重新启动。将
forever
设置为
false
将使动画在到达第一个迭代后停止

将
end
设置为一个回调函数，该函数将在动画的第一次迭代完成时调用。此选项要求
永久
设置为
false
，否则它将永远不会被调用

使用：

应用这些更改后，您可以使用适当的参数调用
电传打字机

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et'
  ],
  forever: false,
  end: function(){
    alert("Teletype is done!");
  }
});

您能在最后一条消息打印后不循环地提醒任何文本吗？请随意编辑我的代码，因为我是jquery的新手
if (settings.forever || (idx + 1 < settings.text.length)) {
  loop($tar, (idx + 1) % settings.text.length);
} else {
  settings.end.call(self);
}

loop($tar, (idx + 1) % settings.text.length);

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et'
  ],
  forever: false,
  end: function(){
    alert("Teletype is done!");
  }
});