【问题标题】:How can I get my javascript function randomly select one function(slideshow), execute it, then repeat?如何让我的javascript函数随机选择一个函数(幻灯片),执行它,然后重复?
【发布时间】:2016-01-24 03:50:03
【问题描述】:

我有一个 javascript 代码用于替换其中包含图像的 html <div>,因此它就像幻灯片放映一样。我在页面上有六个这样的幻灯片,我需要它们随机更改可能切换图像 3 然后 6 然后 2 等等。

$(document).ready(function(){
     SlideShow6();
});

function SlideShow6() {
    $('#slideshow6 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow6 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow6');
    }, 0000);
}

最后这里的时间是0000 (0) 秒。因为我需要计时器在选择随机幻灯片之前暂停2000 (2) 秒。我用这个尝试了我的脚本:

var funcs = [];

funcs[0] = function() {
    $('#slideshow6 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow6 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow6');
    }, 0000);
}
funcs[1] = function() {
    $('#slideshow5 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow5 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow5');
    }, 0000);
}

// 等等六次... 那么……

$(document).ready(function(){
    var rand = parseInt(Math.random()*funcs.length);  
    funcs[rand]();
    setTimeout(arguments.callee, 2000);
});

它变得非常奇怪,它随机选择我的功能,但它无限次地执行幻灯片,不久之后所有六个都开始运行。也许是因为0000?我需要他们一张一张地切换图像。

---------更新---------- 我不确定它是否可以从上面的代码中理解,但SlideShow6 函数每次都使用不同的funcs[1] 数字重复6 次,以便它可以将所有6 个图像的幻灯片添加到funcs[] 数组中。

我是 JavaScript 的新手,但总而言之,这就是我对代码的成像方式:

需要做一个数组,所以我把所有这些函数都放进去

var funcs = [];
funcs[0] = function() {
    $('#slideshow1 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow1 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow1');
    }, 0000);    
}
funcs[1] = function() {
**All the same except number slideshow1 changes to 2,3,4,5, and 6**
}
funcs[2] = function() {
}
funcs[3] = function() {
}
funcs[4] = function() {
}
funcs[5] = function() {
}

然后您需要调用它,以便创建一个数学函数,随机选择 1-6 选择哪个数字,然后该函数播放一次。然后随机在 2 秒内选择另一个数字。另一张图片幻灯片发生了变化。就是这样,永远每 2 秒。谢谢。

【问题讨论】:

  • 0000 in setTimeout 说“等待 0 毫秒”,也就是不要等待。如果您的值为 0,不妨跳过 setTimeout 调用。
  • 嘿@MatthewHerbst 我怎样才能取消它?如果我尝试删除0000,那么它根本不起作用。但是我不想删除2000 我希望它每2秒随机切换一次图像。

标签: javascript function loops random onload


【解决方案1】:

在 Chrome 控制台中完成所有测试:

setInterval 的第二个参数设置为0 会导致函数无限次运行。我不知道为什么 - 我希望该函数立即运行一次。

您可以通过以下方式在控制台中看到这一点:

setInterval(function () {
  console.log('Crazy');
}, 0000);

(为了简洁起见,我删除了这篇文章的一些迭代,因为它们被问题 OP 认为是不充分的。)


更新 2:

var funcs = [];

funcs[0] = function() {
  $('#slideshow6 > div:gt(0)').hide();

  $('#slideshow6 > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow6');
}

funcs[1] = ...;
funcs[2] = ...;
funcs[3] = ...;
funcs[4] = ...;
funcs[5] = ...;

$(document).ready(function() {
  window.setInterval(function() {
    var rand = Math.floor(Math.random() * funcs.length);
    funcs[rand]();
  }, 2000);
});

我认为这是一个更优雅的解决方案。这是做什么的:永远循环。每次循环迭代,等待2秒,然后随机切换一张图片。

【讨论】:

  • 感谢@Matthew Herbst,但它不会像我想要的那样工作。它确实选择了一个随机的,但每隔 2 秒它就会滑动一次。我希望它每 2 秒随机选择一个并滑动一次。但无论如何,谢谢这比我自己得到的更接近。如果您能更新您的答案,我将不胜感激。再次感谢。
  • 你的意思是永远每两秒?
  • @user3263981 查看我刚刚进行的更新。我认为这将是您正在寻找的。​​span>
  • 与您的第一个代码不同,第二个代码根本不起作用。请查看我的更新。
  • @Sammy7 啊!昨晚深夜我没有想清楚。无限循环使浏览器崩溃!查看更新的代码(再次)。它将每 2 秒永久运行一次,不会导致浏览器崩溃或导致 StackOverflow。
猜你喜欢
  • 1970-01-01
  • 2010-11-16
  • 1970-01-01
  • 2021-11-04
  • 1970-01-01
  • 2019-05-12
  • 2014-12-25
  • 1970-01-01
  • 2017-08-22
相关资源
最近更新 更多