@justifycontent

Почему timerRef равен 6?

Есть приложение, которое может добавлять число, которое на 1 больше последнего в списке.
Число можно добавлять в ручную, а можно нажать на старт, тогда обработчик кнопки старт будет через setInterval автоматически добавлять число в список. Но почему timerRef.current всегда равен 6? Откуда эта 6? timerRef.current хранит в себе setInterval.

import React, { useEffect } from 'react';

const List = () => {
  const [numbers, setNumbers] = React.useState([1, 2, 3, 4]);
  const ulRef = React.useRef();
  const timerRef = React.useRef();

  React.useEffect(() => {
    ulRef.current.addEventListener('scroll', handleScroll)
  }, [])

  const handleScroll = () => {
    console.log('Произошел scroll');
  }

  const removeScroll = () => {
    console.log(ulRef)
    ulRef.current.removeEventListener('scroll', handleScroll);
  }

  const addNumber = () => {
    setNumbers(prev =>[...prev, prev[prev.length - 1] + 1]);
  }

  const start = () => {
    timerRef.current = setInterval(addNumber, 1000);
  }

  const stop = () => {
    clearInterval(timerRef.current);
  }

  useEffect(() => {
    console.log(timerRef.current)
  })


  return (
    <>
      <ul ref={ulRef}>
        {numbers.map((num, i) => <li key={`${num}_${i}`}>{num}</li>)}
      </ul>
      <button onClick={addNumber}>✅ Добавить число</button>
      <button onClick={removeScroll}>❎ Не следить</button>
      <button onClick={start}>▶️ Старт</button>
      <button onClick={stop}>⏹ Стоп</button>
    </>
  )
}

export default List;
  • Вопрос задан
  • 77 просмотров
Решения вопроса 1
@Konf
Редактирую ответы на 2 + 2 по 4 раза
Вызов setTimeout, как и setInterval, возвращает идентификатор таймера, который можно использовать для отмены (отключения) выполнения функции после таймера с помощью clearTimeout(id) - для setTimeoutи clearIntervalдля setInterval

Подробнее

Почему именно 6?
В браузерах идентификаторы таймеров - числовые, уникальные для каждого таймера, и идут по порядку начиная с 1. Это значит что до таймера под номером 6 какими-то скриптами было запущено ещё 5 интервалов/таймеров.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы