单击时从范围生成随机数，与以前的数字不同

Question

我真的不知道自己在做什么，但一直在玩 jQuery 来实现这一点。除了偶尔连续两次显示相同的推荐之外，我的功能运行良好，这是我试图解决的问题。这是我尝试的无法计算的代码，我很确定这是我不理解的明显内容！任何帮助表示赞赏。

您可以在推荐页脚中看到预期的功能：https://blue-coast-f4d2bc.webflow.io/contact

     function getNumber(previous) {
  if (previous === undefined) {
      i = Math.floor(Math.random() * 14) + 1;
      return i;
  }
  else {
    while {
      i = previous; 
      i = Math.floor(Math.random() * 14) + 1;
    }
    return i;
  }


var quoteNumb = getNumber();
 $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
  
  var footHeight = $('.testimonial-container').height();
$('.testimonial-container').css({'min-height': footHeight  + 'px'});
  $('.testimonial-container').css({'max-height': footHeight  + 'px'});
  
 $(document).ready(function() {
            $(".refresh-button").click(function() {
                $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() {
                $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show');
                  quoteNumb = getNumber(quoteNumb);
                $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
                $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000);
                });
            });
        });

Answer 1

   let quotes = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

let state = 0;

let sequence = getRandomSequence(0, quotes.length);

function getRandomSequence(start, length) {
    return shuffle(generateRange(start, length))
}
  
function generateRange(start, length) {
    return Array.from({ length }, (v,k) => k + start)
}
  
// Fisher-Yates shuffle
function shuffle(arr) {
    arr = [...arr];
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
}

function nextInSequence() {
    let quoteNumb = quotes[sequence[(state++) % sequence.length]];
    $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
          $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000);
}

nextInSequence();

$(document).ready(function() {
            $(".refresh-button").click(function() {
        $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() {
                $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show');
                  nextInSequence();
                });
            });
        });

Answer 2

我建议创建一个随机序列来确定推荐出现的顺序。这样在所有项目出现之前它们不会重复。

我们首先创建一个像 0,1,2,3,4 ... N 这样的序列，然后我们使用（在这种情况下）Fisher-Yates 类型随机播放它。

一旦我们创建了序列，获取下一个项目就很容易了。在这个例子中，我们循环遍历所有项目，然后返回开始。

let state = 0;

let sequence = getRandomSequence(1, 6);

function getRandomSequence(start, length) {
    return shuffle(generateRange(start, length))
}
  
function generateRange(start, length) {
    return Array.from({ length }, (v,k) => k + start)
}
  
// Fisher-Yates shuffle
function shuffle(arr) {
    arr = [...arr];
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
}

// Should drop in as a replacement...
function getNumber() {
    return sequence[(state++) % sequence.length];
}

quoteNumb = getNumber();

function showNextQuote() {
    $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() {
        $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show');
        quoteNumb = getNumber(quoteNumb);
        $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
        $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000);
    });
}

showNextQuote();

.footer-testimonial-quote
{ 
    visibility: hidden;
}

.show 
{ 
    visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button onclick='showNextQuote()'>
Next quote
</button>
<br><br>

  <div class="footer-testimonial-quote">What a great product!</div>
  <div class="footer-testimonial-quote">Great product!</div>
  <div class="footer-testimonial-quote">Love it</div>
  <div class="footer-testimonial-quote">Amazing</div>
  <div class="footer-testimonial-quote">Meh</div>
  <div class="footer-testimonial-quote">Awesome, would recommend</div>