Сброс функции setTimeout для предотвращения действия - PullRequest
Новая
       5

Сброс функции setTimeout для предотвращения действия

0 голосов
/ 16 апреля 2019

Я могу думать об этом неправильно.Так что любое руководство было бы очень полезно.

У меня есть элемент, тогда при нажатии открывается несколько переключателей.Нажатие одной из переключателей запускает setTimeout из 2300ms, это добавит класс Frequency--closing к элементу Frequency, который запускает анимацию в css, когда по истечении времени ожидания этот компонент удаляется из DOM.

Я использую тайм-аут в качестве средства разрешения анимации до ее удаления из DOM.

Я стремлюсь к тому, чтобы щелкнуть радиокнопку и затем щелкнуть другую радиокнопку, прежде чемкомпонент удаляется из DOM, который сбрасывается таймером, поэтому при втором щелчке он ждет еще один 2300ms, прежде чем он будет удален из DOM.

Ниже приведен компонент, который использует состояние для определения, является ли элементоткрывается или закрывается с помощью функции onToggle() 

const SavedSearchBox = ({ modifier, search, loading }) => {
  const [frequencyToggled, setFrequencyToggled] = useState(false);
  const [closeFrequency, setCloseFrequency] = useState(false);
  const timeoutRef = useRef(null);

  const onToggle = () => {
    if (frequencyToggled) {
      setCloseFrequency(true);
      timeoutRef.current = setTimeout(
        () => setFrequencyToggled(!frequencyToggled),
        2300
      );
    } else {
      setCloseFrequency(false);
      setFrequencyToggled(!frequencyToggled);
      clearTimeout(timeoutRef.current);
    }
  };

  useEffect(() => () => clearTimeout(timeoutRef.current), []);

  return (
    <div
      className={`SavedSearchBox ${modifier ? modifier : ""} ${
        loading && loading.status ? "SavedSearchBox--loading" : ""
      }`}
    >
      <div className="SavedSearchBox-footer">
        {frequencyToggled ? (
          <Frequency
            closeFrequency={closeFrequency}
            onChange={() => onToggle()}
          />
        ) : (
          <div onClick={() => onToggle()}>Click Here</div>
        )}
      </div>
    </div>
  );
};

Функция onToggle() также вызывается из дочернего компонента Frequency.Этот компонент также включает класс Frequency--closing для закрывающей анимации. 

const Frequency = props => {
  const [active, setActive] = useState(0);

  const inputs = [
    ["Instant Alerts", "Instant"],
    ["Twice Daily Alerts", "Twice"],
    ["Daily Alerts", "Daily"],
    ["Weekly Alerts", "Weekly"],
    ["No Email Alerts", "None"]
  ];
  return (
    <div
      className={`Frequency ${
        props.closeFrequency ? "Frequency--closing" : ""
      }`}
    >
      <div className="Frequency-list">
        {inputs.map(([text, value], i) => (
          <div key={i} className="Frequency-listItem">
            <label className="Frequency-listLabel">
              {text}
              <input
                type="radio"
                checked={value === inputs[active][1]}
                onChange={() => {
                  props.onChange();
                  setActive(i);
                }}
                value={value}
              />
              <span className="Frequency-listRadio" />
            </label>
          </div>
        ))}
      </div>
    </div>
  );
};

Вот анимации на случай, если это, возможно, вызывает эту проблему 

.Frequency-listItem {
  animation: enter $Frequency-duration $Frequency-easing backwards;
  transform: translateY(0%);
  transition: transform $Frequency-duration ease;
  display: flex;
  justify-content: left;
  align-items: center;

  @for $i from 1 through 6 {
    &:nth-of-type(#{$i}) {
      animation-delay: calc(#{$i} * #{$Frequency-delay});
    }
  }
}

.Frequency--closing .Frequency-listItem {
   animation: exit $Frequency-exitDuration $Frequency-easing both 1;
   transform: translateY(100%);
   transition: transform $Frequency-exitDuration ease;

   @for $i from 6*-1 through -1 {
      &:nth-of-type(#{abs($i)}) {
         animation-delay: calc(#{abs($i)} * #{$Frequency-exitDelay} + 2s);
      }
    }
 }

@keyframes enter {
  from {
      opacity: 0;
      padding: 0;
      margin: 0;
      max-height: 0;
      transform: scale(.7);
  }
}

@keyframes exit {
   from {
       opacity: 1;
       max-height: 100%;
       transform: scale(1);
   }
   to {
      opacity: 0;
      padding: 0;
      margin: 0;
      max-height: 0;
      transform: scale(.7);
  }
 }

Вотa CODESANBOX если вы хотите проверить его

Любая помощь будет принята с благодарностью!

...