Сделать чтобы функция randomTime при нажатии 'n' button возвращала один результат как для setTimeout так и для отрисовки?

Question

[chatterbox777]

Прошу подсказать мне, проблема в следующем :
Необходимо, чтобы при нажатии кнопки button 1 , 2, 3 запускался таймер со случайной задержкой от 1 до 10 секунд.
По завершению отсчета таймера в лог нажатий добавляется запись в следующем формате:
“${таймстемп вывода строки в лог}: Нажата кнопка ${номер кнопки}, задержка ${время
задержки}, время нажатия ${таймстемп времени нажатия кнопки}
Проблема в том, что -
функция randomTime при нажатии 'n' button возвращает разные результаты для setTimeout и для отрисовки.
то есть settimeout при нажатии на button возвращает рандомное время от 1 до 10, например получилось 7 секунд в setTimeout, а при отрисовке он может написать что кнопка нажата спустя 3 секунды, т.к. видимо randomTime() вернуло другое рандомное число , а именно 3 секунды к примеру.... как сделать чтобы эта функция и в setTimeout и в отрисовке возвращало одно и тоже значение. ( то есть нажал на кнопку - он ждет рандомное время от 1 до 10 сек, отрисовывает что "нажата кнопка такая то за рандомное время секунд).... Спасибо

import React, { Component } from "react";
import classTags from "../components/Programm.module.css";

const buttons = [
  { id: 1, name: "Button1" },
  { id: 2, name: "Button2" },
  { id: 3, name: "Button3" }
];

const asd = () => {
  let date = new Date();
  let dateString = date.toString();
  return dateString;
};

const randomTime = () => {
  return Math.round(Math.random() * 10);
};

class Programm extends Component {
  state = {
    array: []
  };

  buttonClickHandler = id => {
    setTimeout(() => {
      this.setState({
        array: [
          ...this.state.array,
          `${asd()} Button ${id} was pressed  with ${randomTime()}s timeout`
        ]
      }); // распаковываю массив array из стейта и  добавляю "Нажата кнопка"
    }, randomTime() * 1000);
  };

  render() {
    const { array } = this.state; // деструктуризация {array} = this.state - тоже внутри объект {} , а именно  state = {array: []};

    return (
      <div className={classTags.btnPosition}>
        {buttons.map(item => (
          <button
            onClick={() => this.buttonClickHandler(item.id)}
            key={item.id}
          >
            {item.name}
          </button>
        ))}
        <div className={classTags.formLog}>
          {array.map((item, index) => (
            <span key={index}>{item}</span>
          ))}
        </div>
      </div>
    );
  }
}

export default Programm;

.btnPosition {
position: relative;
top: 200px;
display: flex;
justify-content: space-around;
width: 500px;
}

.formLog {
    position: absolute;
    top: 57px;
    right: 48px;
    width: 80%;
    height: 200px;
    border: 1px solid grey;
}

import React from "react";
import "./App.css";
import Programm from "./components/Programm";

const App = props => {
  return (
    <div>
      <Programm />
    </div>
  );
};

export default App;

Answer 1

[Aetae]

Мужик, ты что такое переменные знаешь?

buttonClickHandler = id => {
    const delay = randomTime();
    setTimeout(() => {
      this.setState({
        array: [
          ...this.state.array,
          `${asd()} Button ${id} was pressed  with ${delay}s timeout`
        ]
      }); // распаковываю массив array из стейта и  добавляю "Нажата кнопка"
    }, delay * 1000);
  };

Comments

[chatterbox777]

блин... это же замыкание простое.... я просто еще нуб.... я думал он все равно ведь должен выйти на самый верх, чтобы найти переменную randomTime.... а оказывается надо просто создать переменную для замыкания...... ппц я нуб)) спасибо друг!