时间戳

首页 > 解决方案 > 我如何循环 jquery 代码或重新启动它？

javascript - 我如何循环 jquery 代码或重新启动它？

问题描述

如何循环此代码以便它在脚本完成运行后运行。然后他又重复一遍。

我想让这个代码无限次重复。

这是 jQuery 3.5.1

// Title
    var title1 = document.getElementById("slide-text-title-id");
    var title2 = document.getElementById("slide-text-title-id-2");
    var title3 = document.getElementById("slide-text-title-id-3");

        $(document).ready(function () {
            setTimeout(function () {
                $(title1).css("opacity", "1");
                $(title1).css("transition", "0.5s");
            }, 500);
            setTimeout(function () {
                $(title1).css("opacity", "0");
            }, 6000);
            setTimeout(function () {
                $(title1).css("opacity", "1");
            }, 20000);
        });

        $(document).ready(function () {
            setTimeout(function () {
                $(title2).css("opacity", "1");
                $(title2).css("transition", "0.5s");
            }, 9000);
            setTimeout(function () {
                $(title2).css("opacity", "0");
            }, 13500);
            setTimeout(function () {
                $(title2).css("opacity", "1");
            }, 20000);
        });

        $(document).ready(function () {
            setTimeout(function () {
                $(title3).css("opacity", "1");
                $(title3).css("transition", "0.5s");
            }, 16000);
            setTimeout(function () {
                $(title3).css("opacity", "0");
            }, 21000);
            setTimeout(function () {
                $(title3).css("opacity", "1");
            }, 26500);
        });

标签： javascripthtmljquerycss

解决方案

原则：

// the collection:
const elements = ['a', 'b', 'c'];

// the stepper function (also called walker or iterator)
function stepper(index) {
  // the current item is elements[index];
  // do something (anything) with current item:

  console.log({
    index,
    [`currentItem (elements[${index}])`]: elements[index]
  });

  // after a while (3000ms), call this function again, with next index:
  // when current item is last, we call with `0`, so it loops:

  setTimeout(function() {
    stepper(index + 1 < elements.length ? index + 1 : 0);
    /* the above line is shorthand for:
       if (index + 1 < elements.length) {
         stepper(index + 1);
       } else {
         stepper(0);
       }
     */
  } , 3000);
}

// start the loop: 
stepper(0);

现在，让我们尝试一些元素。可以说，处理此问题的最简单方法是在幻灯片集合上切换类active。使用 CSS，我们将样式应用于活动元素。为了能够控制动画的方向，我还在leaving当前活动的幻灯片中添加了一个类，我将在下一次迭代中将其删除。

其余的都是细节。根据经验，细节在 Web 开发中很重要。

const elements = [1, 2, 3];

function stepper(index) {
  // remove class leaving from all slides
  $('.slider .leaving').removeClass('leaving');

  // add class leaving to the previously active item and remove class active
  $('.slider .active').addClass('leaving').removeClass('active');

  // add class active to current item
  $('.slider > div').eq(index).addClass('active');

  setTimeout(() => stepper(index < elements.length - 1 ? index + 1 : 0), 2100);
}

// start the infinite loop:

stepper(0);
body {
  margin: 0;
}
.slider {
  position: relative;
  overflow: hidden;
}

.slider > div {
  font-size: 7rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
  background-color: #ccc;
  color: white;
}
.slider .leaving {
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.slider .active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.4,0,.2,1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

注意：我尝试介绍原理，然后介绍最小实现。在野外，代码变得更加复杂和冗长。查看您当前的尝试，我建议您先了解基础知识。

最快的学习方法可能是观看教程并玩弄那里提供的代码。不要害怕更改代码。一点一点地改变一切，看看哪里坏了。

在每一行，您都可以使用它console.log({ stuff })来查看该stuff行的内容。
破解代码。您越早了解它为什么会损坏，您也会越早知道这一点！

推荐阅读