Jquery/Javascript定时器

我编写了一个简单的函数，使用淡入/淡出效果转换三个div元素。当用户单击链接时会触发该事件。这是我的密码：

$(".link1").click(function () {
   $(".feature1").fadeIn(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeOut(1000);
});

$(".link2").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeIn(1000);
   $(".feature3").fadeOut(1000);
});

$(".link3").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeIn(1000);
});

我需要能够设置某种计时器，以便这些转换每隔8秒左右自动发生。我还希望它们从本质上“循环”，这样，如果我们到达集合中的第三个div，它将返回到第一个div。

setInterval（表达式，timeout）；以间隔运行函数，间隔时间为超时长度

例如：

var intervalID = setInterval(alert('heelo'), 3000); // will alert hello every 3 seconds

//clearInterval（有效期内）；//将清除计时器设置间隔（表达式、超时）；以间隔运行函数，间隔时间为超时长度

例如：

var intervalID = setInterval(alert('heelo'), 3000); // will alert hello every 3 seconds

//clearInterval（有效期内）；//将清除计时器，请尝试以下操作：

var i = 0;
var transition = setInterval(function(){
                     i++;
                     if (i == 4) {i = 1}
                     $(".feature"+i).stop().fadeIn(1000, function(){
                        $(this).delay('6000').fadeOut(1000)
                     })
                  }, 8000)

请尝试以下操作：

var i = 0;
var transition = setInterval(function(){
                     i++;
                     if (i == 4) {i = 1}
                     $(".feature"+i).stop().fadeIn(1000, function(){
                        $(this).delay('6000').fadeOut(1000)
                     })
                  }, 8000)

---

我不确定我是否完全理解您希望它们何时循环或循环频率，但我认为这应该对您有所帮助。。。每8秒它会在动画中循环一次

function fadeLoop(selectors, animations, times, index) {
    index = index || 0;
    if(index == selectors.length) return;
    $((selectors[index])[animations[index]](times[index], function() {
        fadeLoop(selectors, animations, times, index + 1);
    });
}

setInterval(function() {
    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeIn', 'fadeOut', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeIn', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeOut', 'fadeIn'],
        [1000, 1000, 1000]
    );
}, 1000 * 8);

---

我不确定我是否完全理解您希望它们何时循环或循环频率，但我认为这应该对您有所帮助。。。每8秒它会在动画中循环一次

function fadeLoop(selectors, animations, times, index) {
    index = index || 0;
    if(index == selectors.length) return;
    $((selectors[index])[animations[index]](times[index], function() {
        fadeLoop(selectors, animations, times, index + 1);
    });
}

setInterval(function() {
    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeIn', 'fadeOut', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeIn', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeOut', 'fadeIn'],
        [1000, 1000, 1000]
    );
}, 1000 * 8);

尝试使用setTimeout（）函数

var timer = null;

function foo_loop(div, timeout) {
  if (div > 3) div = 1;
  $(".feature"+div).fadeIn(1000);
  $("div[class^=feature]:not(.feature"+div+")").fadeOut(1000);
  clearTimeout(timer);
  timer = setTimeout(function() {
    foo_loop(div + 1, timeout);
  }, timeout);
}

这样运行（以第一个div和8秒超时开始）：

停止循环的功能：

function stop_loop() {
  clearTimeout(timer);
}

需要停止循环时运行它（例如，单击id为“停止”的元素）：

尝试使用setTimeout（）函数

var timer = null;

function foo_loop(div, timeout) {
  if (div > 3) div = 1;
  $(".feature"+div).fadeIn(1000);
  $("div[class^=feature]:not(.feature"+div+")").fadeOut(1000);
  clearTimeout(timer);
  timer = setTimeout(function() {
    foo_loop(div + 1, timeout);
  }, timeout);
}

这样运行（以第一个div和8秒超时开始）：

停止循环的功能：

function stop_loop() {
  clearTimeout(timer);
}

需要停止循环时运行它（例如，单击id为“停止”的元素）：

---

---

您是否尝试过

setInterval（）

？您是否尝试过

setInterval（）

？或者可能更简单：而不是

$（“.feature”+i）.stop（）.fadeIn（1000，function（）{$（this）.delay（'7000'）.fadeOut（1000）}

只需使用

$（“.link”+i）。单击（）

通常不推荐使用。而是将其放入函数中并调用该函数。@Christoph click（）不是函数吗？为什么不推荐使用它？@Horen我的意思是另一种方式——通常是将匿名函数传递给eventhandler。只需使用命名函数并将函数引用传递给eventhandler。这样，您就可以选择在不触发事件的情况下调用命名函数。不建议以编程方式触发事件，因为您没有以这种方式获得事件对象的所有参数。或者可能更简单：而不是

$（“.feature”+i）.stop（）.fadeIn（1000，function（）{$（this）.delay（'7000'）.fadeOut（1000）}）

只需使用

$（“.link”+i）。单击（）

@Horen触发

。单击（）

通常是不推荐的。而是将其放入函数中并调用该函数。@Christoph click（）不是函数吗？为什么不推荐使用它？@Horen我的意思是另一种方式——通常是将匿名函数传递给eventhandler。只需使用命名函数并将函数引用传递给eventhandler。这样，您就可以选择在不触发事件的情况下调用命名函数。不建议以编程方式触发事件，因为您没有事件对象的所有参数。这样做行不通，您需要传递一个函数（引用）或一个本质上是字符串且不推荐的表达式。这样做行不通，您需要传递一个函数（引用）或者一个本质上是字符串的表达式，不推荐使用。这是完美的，正是我想要的。当我单击原始示例中包含的一个链接时，是否有任何方法可以暂停自动转换？是的，您可以-创建全局变量

var timer=null

并更改函数：

clearTimeout（timer）；timer=setTimeout（函数（）{foo_loop（div+1，timeout）；}，timeout）

并添加停止事件：

$（'#stop'）.bind（'click'，function（）{clearTimeout（timer）；}）我是将其添加到原始代码中，还是将其作为单独的函数？您是否介意更新您的原始答案，以反映这将如何添加？谢谢，这似乎大部分工作。但是，当单击的项是集合中的最后一个div时，它不起作用。循环继续运行。这是因为该规则覆盖了stop_循环函数吗<代码>如果（div>3）div=1使用
警报扩展
停止循环（）
函数，以确保调用该函数。它应该清除计时器，使循环停止。这是完美的，正是我所寻找的。当我单击原始示例中包含的一个链接时，是否有任何方法可以暂停自动转换？是的，您可以-创建全局变量
var timer=null
并更改函数：
clearTimeout（timer）；timer=setTimeout（函数（）{foo_loop（div+1，timeout）；}，timeout）
并添加停止事件：
$（'#stop'）.bind（'click'，function（）{clearTimeout（timer）；}）我是将其添加到原始代码中，还是将其作为单独的函数？您是否介意更新您的原始答案，以反映这将如何添加？谢谢，这似乎大部分工作。但是，当单击的项是集合中的最后一个div时，它不起作用。循环继续运行。这是因为该规则覆盖了stop_循环函数吗<代码>如果（div>3）div=1使用
警报扩展
停止循环（）
函数，以确保调用该函数。它应该清除计时器，以便循环停止。