每次字符串迭代后如何调用回调函数? [英] How can I call the callback function after each string iteration?

问题描述

我正在使用jQuery库类型-在此处找到它: http://macarthur.me/typeit/docs/

I am using the jQuery libary type-it found here:http://macarthur.me/typeit/docs/

这是我的代码

 $('.type-it').typeIt({
         strings: ['Text 1','Text 2'],
         speed: 110,
         breakLines: false,
         callback: function() { $('.type-it').css('background-color', '#EFC137').delay(1000).queue(function() {$('.type-it').empty() }) }
    })
    .tiPause(1000);

我想做的是在键入每个字符串之后而不是在所有字符串都键入之后运行回调函数.

What I want to do is run the callback function after each string is typed rather than after all the strings are typed.

有什么想法吗?

先谢谢了.

推荐答案

如果该库不支持，我们可以将各个字符串传递给该函数.这是一个技巧.

If the library doesn't support it, we can pass individual strings to the function. Here is a hack to do it.

$(document).ready(function() {
  var ara = ['Text 1', 'Text 2'].reverse();
  doType();

  function doType() {
    var x = ara.pop();
    $('.type-it').typeIt({
      strings: [x],
      speed: 110,
      breakLines: false,
      callback: function() {
        $('.type-it').css('background-color', '#EFC137').delay(2000).queue(function() {
          $('.type-it').empty();
          $('.type-it').css('background-color', 'transparent');
          if (ara.length > 0)
            doType();
        })
      }
    });
  }
});

.type-it {
  transition: all 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<div class="type-it"></div>

这篇关于每次字符串迭代后如何调用回调函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！