How to prevent repeating random numbers in Vue 3 and JavaScript

Question

I am attempting to build a function that loops through a series of array objects containing names and ids after the array objects have been randomized, then returns a single filtered item to slots.value. So far, my spin function works in terms of looping through the randomized objects. However, the line const index = Math.floor(Math.random() * list.length) occasionally returns the same index number twice in a row. I wish to prevent the random index function from returning the same index number twice in a row. How can I do this?

const slots = ref([])

const names = ref([
  { name: 'Leslie', id: 1 },
  { name: `Ron`, id: 2 },
  { name: 'April', id: 3 },
  { name: 'Andy', id: 4 },
  { name: 'Tom', id: 5 },
  { name: 'Jerry', id: 6 },
])

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

const spin = async () => {
  const list = names.value.sort(() => Math.random() - 0.5)
  const newArray = []

  for (let i = 0; i < list.length; i++) {
    const index = Math.floor(Math.random() * list.length)
    await sleep(100)
    slots.value = list.filter(r => r.id === (index + 1))
  }
}

Create an array containing the numbers from 0 to x, select a random element of the array, then use splice to remove it. Or shuffle the array and keep using pop() — user5734311
– user5734311, Commented Jul 24, 2022 at 7:30

tony19 · Accepted Answer · 2022-07-24 21:04:55Z

1

One solution is to re-generate the index if the new value matches the previous one:

let prevIndex = null
const generateRandIndex = max => {
  let index
  do {
    index = Math.floor(Math.random() * max)
  } while (index === prevIndex)
  prevIndex = index
  return index
}

const spin = async () => {
  ⋮
  for (let i = 0; i < list.length; i++) {
    const index = generateRandIndex(list.length)
    ⋮
  }
}

demo

edited Jul 24, 2022 at 21:04

answered Jul 24, 2022 at 20:54

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to prevent repeating random numbers in Vue 3 and JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related