无法让我的单词随机化脚本正确循环

Question

我试图让这个脚本运行，而不是以 Awesome 这个词结尾。然后再次循环/重复。

这是 JS

var i, word, rnd, words, fadeSpeed, timer;

words = ['respected​.', 'essential.', 'tactical.', 'effortless.', 'credible.', 'smart.', 'engaging.', 'focused.', 'effective.', 'clear.', 'relevant.', 'strategic.', 'trusted.', 'compelling.', 'admired.', 'inspiring.', 'cogent.', 'impactful.', 'valued.'];

fadeSpeed = 500;
timer = 2000;

for (i = 0; i < 20; i++) {
    if (i === 19) {
        word = 'awesome.';
        rnd = Math.floor(Math.random() * words.length);
        word = words[rnd];
        words.splice(rnd, 1);
    } else {
        rnd = Math.floor(Math.random() * words.length);
        word = words[rnd];
        words.splice(rnd, 1);
    }

    (function(word) {
        $('h1.random em').fadeOut(fadeSpeed, function() {
                $(this).html(word);
            })
            .slideDown('slow')
            .delay(timer)
            .fadeIn(fadeSpeed);
    })(word);
}

这是开发网站的链接。

http://dev-pivot-website.pantheon.io/#

Answer 1

Splice 将从您的数组中删除单词。

words.splice(rnd, 1);  

在第 20 个元素之后，没有什么可以迭代了。

正如@Jamiec 所说，您将需要一个连续循环。您也可以使用 setTimeout();连续循环（应该比 while(true) 更轻 CPU）

尝试这样的事情（@jamiec 答案的略微修改版本）

   var i, word, rnd, words, fadeSpeed, timer;

function getWords(){
var words = ['respected​.', 'essential.', 'tactical.', 'effortless.', 'credible.', 'smart.', 'engaging.', 'focused.', 'effective.', 'clear.', 'relevant.', 'strategic.', 'trusted.', 'compelling.', 'admired.', 'inspiring.', 'cogent.', 'impactful.', 'valued.'];
    return words;
}

words = getWords();
fadeSpeed = 500;
timer = 2000;

displayWords();



function displayWords(){
  var word;
  if(words.length == 0){
      word = "awesome.";  
      words = getWords();      
  }
  else{
    rnd = Math.floor(Math.random() * words.length);
    word = words[rnd];
    words.splice(rnd, 1);
  }

  (function(word) {
        $('h1.random em').fadeOut(fadeSpeed, function() {
                $(this).html(word);
            })
            .slideDown('slow')
            .delay(timer)
            .fadeIn(fadeSpeed);
    })(word);

    setTimeout(displayWords,1000);
}

小提琴：http://jsfiddle.net/198ke25u/3/

Answer 2

在

if(i===19)

案例，你正在设置

word= 'awesome.';

然后在不使用它的情况下立即覆盖它：

word= words[rnd];

删除最后一行（以及它上面的 rnd= 行，这将变得多余）。

Answer 3

为了让这个持续循环，看到你每次都从数组中删除（大概是这样你不会在每个序列中得到重复）你需要做一些事情

1. 使用无限循环 (while(true)) 代替固定循环 (for(;;))
2. 当您到达awesome. 时，使用原始单词列表重新填充数组

这是实现这一目标的一种方法 - 我刚刚对数组进行了 C/P，但有一种更聪明的方法可以做到这一点 - 我将留给你的想象力。

var i, word, rnd, words, fadeSpeed, timer;

words = ['respected​.', 'essential.', 'tactical.', 'effortless.', 'credible.', 'smart.', 'engaging.', 'focused.', 'effective.', 'clear.', 'relevant.', 'strategic.', 'trusted.', 'compelling.', 'admired.', 'inspiring.', 'cogent.', 'impactful.', 'valued.'];

fadeSpeed = 500;
timer = 2000;

while(true){
  var word;
  if(words.length == 0){
      word = "awesome.";  
      words = ['respected​.', 'essential.', 'tactical.', 'effortless.', 'credible.', 'smart.', 'engaging.', 'focused.', 'effective.', 'clear.', 'relevant.', 'strategic.', 'trusted.', 'compelling.', 'admired.', 'inspiring.', 'cogent.', 'impactful.', 'valued.'];
  }
  else{
    rnd = Math.floor(Math.random() * words.length);
    word = words[rnd];
    words.splice(rnd, 1);
  }
  (function(word) {
        $('h1.random em').fadeOut(fadeSpeed, function() {
                $(this).html(word);
            })
            .slideDown('slow')
            .delay(timer)
            .fadeIn(fadeSpeed);
    })(word);
}

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