尝试随机化数组中的单词并在 5 后停止循环

Trying to randomize words from an array and stop the loop after 5

本文关键字：循环 单词 随机化 数组      更新时间：2023-09-26

我正在尝试编写一个脚本，该脚本将从一个名为words的数组中随机选择一个单词，并在5次后停止循环并将html替换为Amazing。 所以它总是以惊人的结束。无法找出这样的事情的最佳实践。我的想法是，只是不知道将脚本终结器放在哪里或如何正确实现这一点。

我觉得我需要在我的脚本中实现这样的东西，但不知道在哪里。请帮忙。

if(myLoop > 15) {
    console.log(myLoop);
    $("h1").html('AMAZING.'); 
}
else {
}

这是我用来循环和创建新单词的 Javascript。

$(document).ready(function(){
    words = ['respected​', 'essential', 'tactical', 'effortless', 'credible', 'smart', 'lucid', 'engaging', 'focussed', 'effective', 'clear', 'relevant', 'strategic', 'trusted', 'compelling', 'admired', 'inspiring', 'cogent', 'impactful', 'valued']
    var timer     = 2000,
        fadeSpeed =  500;
    var count = words.length;
    var position, x, myLoop;
    $("h1").html(words[rand(count)]);
    function rand(count) {
        x = position;
        position = Math.floor(Math.random() * count);
        if (position != x) {
            return position;
        } else {
            rand(count);
        }
    }
    function newWord() {
        //clearTimeout(myLoop); //clear timer
        // get new random number
        position = rand(count);

        // change tagline
        $("h1").fadeOut(fadeSpeed, function() {
            $("h1").slideDown('slow'); $(this).html(words[position]).fadeIn(fadeSpeed);        
        });
        myLoop = setTimeout(function() {newWord()}, timer);
    }
    myLoop = setTimeout(function() {newWord()}, timer);
});

这是我的代码笔

http://codepen.io/alcoven/pen/bNwewb

这是一个解决方案，它使用for循环和闭包。

使用拼接从数组中删除单词。 这可以防止重复。

我正在使用jQuery延迟代替setTimeout：

var i, word, rnd, words, fadeSpeed, timer;
words = ['respected​', 'essential', 'tactical', 'effortless', 'credible', 'smart', 'lucid', 'engaging', 'focused', 'effective', 'clear', 'relevant', 'strategic', 'trusted', 'compelling', 'admired', 'inspiring', 'cogent', 'impactful', 'valued'];
fadeSpeed =  500;
timer = 2000;
for(i = 0 ; i < 6 ; i ++) {
  if(i===5) {
    word= 'awesome';
  }
  else {
    rnd= Math.floor(Math.random() * words.length);
    word= words[rnd];
    words.splice(rnd, 1);
  }
  
  (function(word) {
    $('h1').fadeOut(fadeSpeed, function() {
             $(this).html(word);
           })
           .slideDown('slow')
           .delay(timer)
           .fadeIn(fadeSpeed);
   }
  )(word);
}
h1 {
  text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>

我添加了一个迭代计数器来检查它更改了多少次。

通过其他变量添加此内容：

var iter = 1;

在newWord函数中添加了以下内容：

iter = iter + 1;
if (iter > 5) {
  return;
}
var word;
if (iter == 5) {
  word = 'awesome';
}
else {
...

这是我通过更改代码的解决方案：

http://codepen.io/anon/pen/YPGWYd

相关文章：