Как организовать delay в react.js?

@roma 

В React.js, для организации задержки (delay) можно использовать функцию setTimeout(). Эта функция вызывает переданную ей функцию через заданное количество миллисекунд.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useState, useEffect } from "react";

function DelayedText() {
  const [text, setText] = useState("");
  
  useEffect(() => {
    const delay = setTimeout(() => {
      setText("Delayed text");
    }, 1000);
    
    return () => clearTimeout(delay); // очистка задержки при unmount
  }, []);
  
  return <p>{text}</p>;
}

В этом примере мы используем useEffect() для установки задержки в 1 секунду. Внутри useEffect() мы вызываем setTimeout(), который вызовет функцию setText() через 1 секунду и установит значение text в "Delayed text". Мы также используем clearTimeout() для очистки задержки, если компонент размонтируется.

В результате, компонент DelayedText будет рендериться без текста, затем через 1 секунду появится текст "Delayed text".

@roma 

Также, в качестве альтернативы, можно использовать библиотеку lodash, которая предоставляет функцию debounce(). Она позволяет организовать задержку перед вызовом функции. Пример:

1 2 3 4 5 6 7 8 9 10 11 12 13

import React, { useState } from "react"; import { debounce } from "lodash";

function DelayedText() { const [text, setText] = useState("");

const delayedSetText = debounce((value) => { setText(value); }, 1000);

const handleChange = (event) => { delayedSetText(event.target.value); };

return ; }

В этом примере мы используем функцию debounce() из библиотеки lodash для создания delayedSetText, которая вызывает setText() через 1 секунду после последнего вызова. Мы используем эту функцию в обработчике события onChange для ввода текста. Таким образом, значение текста будет обновляться с задержкой в 1 секунду после окончания ввода.