Блог

Главная - Вопросы по программированию - Как установить временную задержку после вызова функции?

Как установить временную задержку после вызова функции?

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть функция, которая случайным образом изменяет фон страницы в react. Но я хочу, чтобы цвет фона менялся на следующий случайный цвет, поэтому я попробовал ниже.

 class App extends Component {
constructor(props) {
super(props);
this.state = {
  quotes: [],
  selectedQuoteIndex: null,
  background: 'green'
}

changeBackground() {
let background = "#"   ((1<<24)*Math.random() | 0).toString(16);
this.setState({background});
}, 2000;

assignNewQuoteIndex() {
this.setState({ selectedQuoteIndex: this.generateNewQuoteIndex() });
 }

backgroundQuoteChange(){
this.assignNewQuoteIndex();
this.changeBackground();
}

render() {
return (
  <div style={{
    width: '100vw',
    height: '100vh',
    backgroundColor: this.state.background
  }}>

<Button id="new-quote" 
 size={'small'} 
 onClick={backgroundQuoteChange}>Next Color amp; Quote
</Button>
 )

Я использую эту функцию на кнопке, которая имеет onClick. Не работает :/

Комментарии:

1. Не могли бы вы также поделиться кодом, в котором вы передаете onClick prop в компоненте? Также, как вы инициируете состояние в компоненте?

2. Я обновил код, но он намного больше. В синтаксисе нет ничего плохого (за исключением функции changeBackground, которая должна иметь задержку)

Ответ №1:

Просто установите переход в соответствующем div с задержкой в 1 секунду и функцией синхронизации ввода-вывода.

 transition: background-color ease-in-out 1s;

Вот песочница: https://codesandbox.io/s/elegant-franklin-d6z99

Я бы настоятельно рекомендовал изучить основы HTML, CSS и JS, прежде чем переходить к фреймворку. Вам определенно нужно немного поработать.

Ответ №2:

Вы можете просто использовать css transition

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
      selectedQuoteIndex: null,
      background: "green"
    };
  }

  changeBackground = () => {
    let background = "#"   (((1 << 24) * Math.random()) | 0).toString(16);
    this.setState({ background });
  };

  render() {
    return (
     <>
       <div
         style={{
           width: "100vw",
           height: "100vh",
           transition: "background-color 1s",
           backgroundColor: this.state.background
         }}
       />

       <button type="button" onClick={this.changeBackground}>
         Next Color amp; quote
       </button>
     </>
   );
  }
}

Вот пример на stackblitz