具有不同时间javascript的div中的循环类答案

【问题标题】：loop class in divs with different time javascript具有不同时间javascript的div中的循环类
【发布时间】：2017-11-08 12:32:10
【问题描述】：

我需要在循环中更改当前元素的类，但时间不同。

在这种情况下它只发生一次：/

有什么建议吗？

<div class="wrapper">
    <div class="wrapper-item wrapper-item--0 current" data-time="2500">
        <div class="item"></div>
    </div>
    <div class="wrapper-item wrapper-item--1" data-time="5000">
        <div class="item"></div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="7000">
        <div class="item"></div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="9000">
        <div class="item"></div>
    </div>
</div>


function myFunction() {
    var current = $('.wrapper').children(".current") 
    var timeOfVisible = $('.wrapper').children(".current").data("time");
    setInterval(function() {
        current.removeClass("current").next().addClass("current");
        if ((current.next()) > $('.wrapper').children().length) {
            alert(current)
        }
    }, timeOfVisible);
}
myFunction()

【问题讨论】：

所以你希望 setInterval 能够处理差异。每个 div 的数据时间
我在这里没有发现问题。你的问题是要链接这个函数吗？
我为它准备了小提琴jsfiddle.net/xd9kw3qm

标签： javascript class loops setinterval timing

【解决方案1】：

首先，您将需要 setTimeout 而不是 Interval，因为您将为每个元素运行一次延迟。其次 - 您需要递归调用您的函数才能在循环中重复。这是为您工作的js：

function changeClass() {
  var current = $('.wrapper .wrapper-item.current');
  if(current.length > 0) {
     var timeOfVisible = current.data("time");
     setTimeout(function(){
    current.removeClass('current');
    if (current.next().length > 0)
        current.next().addClass('current');
    else
      $('.wrapper .wrapper-item').first().addClass('current');
      changeClass();
  }, timeOfVisible); 
  }
};

changeClass();

Codepen 示例here.

另外，如果您不想要无限循环，请改用这个：

function changeClass() {
  var current = $('.wrapper .wrapper-item.current');
  if(current.length > 0) {
     var timeOfVisible = current.data("time");
     setTimeout(function(){
    current.removeClass('current');
    if (current.next().length > 0) {
      current.next().addClass('current');
      changeClass(); 
    }
  }, timeOfVisible); 
  }
};

changeClass();

【讨论】：

【解决方案2】：

如果你想链接函数，那么你需要将主函数循环添加到 setInterval 的回调中。

只需这样做：

function myFunction() {
    var current = $('.wrapper').children(".current") 
    var timeOfVisible = $('.wrapper').children(".current").data("time");
    setInterval(function() {
        current.removeClass("current").next().addClass("current");
        if ((current.next()) > $('.wrapper').children().length) {
            alert(current)
        }
        myFunction();
    }, timeOfVisible);
}

我所做的只是将函数调用myFunction() 移到回调内部。

【讨论】：

【解决方案3】：

你可以通过调用函数TWO次来解决这个问题......并递归调用它，即在其自身内

你可以查看控制台....

这是一个有效的 sn-p

$(document).ready(function(){ 
	function myFunction() {
	  
    var current = $('.wrapper').children(".current"); 
    var timeOfVisible = $('.wrapper').children(".current").data("time");
	 
    setInterval(function() {
        current.removeClass("current").next().addClass("current");
		console.log($(current))
        if ((current.next()) > $('.wrapper').children().length) {
            alert(current)
        }
		myFunction()
    }, timeOfVisible);
}
myFunction();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="wrapper">
    <div class="wrapper-item wrapper-item--0 current" data-time="2500">
        <div class="item">0</div>
    </div>
    <div class="wrapper-item wrapper-item--1" data-time="5000">
        <div class="item">1</div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="7000">
        <div class="item">2</div>
    </div>
    <div class="wrapper-item wrapper-item--0" data-time="9000">
        <div class="item">3</div>
    </div>
</div>

【讨论】：