jQuery在每个转盘幻灯片上一次执行一个函数

我试图在每张旋转木马幻灯片上运行一个函数，每次运行一个函数，以便在每张幻灯片可见（活动）时获得视觉效果

该函数向元素添加类，但在页面加载或第三张幻灯片（已添加类）上不起作用

第二个旋转木马项目的工作罚款

$('#carousel').on('slide.bs.carousel', function () {
    //console.log('slide event!');

    var arr = $('.carousel-item .text .st0').get();
    setTimeout(function delayMainFunction() {

        function random(arr) {
            if (!arr.length) {
                return;
            }
            var el = arr.splice(Math.floor(Math.random() * arr.length), 1);
            $(el).attr('class', 'st0 transition-state');
            setTimeout(function () {
                random(arr);
            }, 10 + Math.floor(Math.random() * 10))
        }
        random(arr);

    }, 600)
});

应在每个幻灯片可见（活动）时进行此转换

---

这里的代码笔

我将您的函数命名为…
这使您可以从任何地方调用它

现在，您可以像调用任何其他函数一样，在加载时调用它。
我添加了一个setTimeout来删除SVG中所有字母的

转换状态

类

---

那是个病人！类的删除使得它比只处理每个项的第一个循环更好。我所做的唯一调整就是增加了超时时间（类删除）。您的代码注释也非常有用。谢谢你的努力。赢赢英雄联盟我很高兴你喜欢它；）你以随机顺序延迟的addClass是一个非常酷的效果。干得好我上了一门平面设计课程，对Illustrator（SVG）产生了强烈的兴趣。尝试在使用上具有创造性。当我的JS技能提高时，我应该做（尝试）一些事情。再次谢谢你，卢伊斯。

console.clear();

$( document ).ready(function() {

  // Made it a named function
  var myAnimation = function(){
    console.log('slide event!');

    var arr = $('.carousel-item .text .st0').get();
    setTimeout(function delayMainFunction() {

      function random(arr) {
        if (!arr.length) {
          return;
        }
        var el = arr.splice(Math.floor(Math.random() * arr.length), 1);
        $(el).attr('class', 'st0 transition-state');
        setTimeout(function () {
          random(arr);
        }, 10 + Math.floor(Math.random() * 10))
      }
      random(arr);

      // Added setTimeout to remove the transition-state class from all SVG letters
      setTimeout(function() {
        $('.carousel-item .text .st0').removeClass('transition-state');
      },3500);

    }, 600);
  };


  $('.carousel').carousel({
    interval: 6000,
    pause: false
  })

  // To run on load
  myAnimation();

  // To bind the function the carousel event
  $(".carousel").on('slide.bs.carousel', myAnimation);
});