Почему не работает debounce?

Question

[Scott]

Через 2 секунды должно выводиться значение из инпута, но оно почему-то undefined.
Код здесь

Answer 1

[Роман]

разбирайтесь (ниже рабочий код):

import React, { useState } from 'react';
import './styles.css';

function debounce(fn, ms, ...args) {
  let timer;
  return (value) => {
    timer = setTimeout(() => {
      // ваш вариант вообще забывал о том что в fn вы пытаетесь передать value
      fn.apply(this, [value,...args]);

      // удалять обработчик таймаута вообще не надо, но если это всетаки делать, то наверное уже после того как 
      clearTimeout(timer);
      timer = null;
    }, ms);
  };
}

export default function App() {
  const [value, setValue] = useState('');

  const handleChange = e => {
    const {value} = e.target;
    delayHandler(value);
  };

  const delayHandler = debounce(value=>{
    setValue(value);
    alert(value);
  }, 2000);

  return (
    <div className="App">
      <p>Current value: {value}</p>
      <form>
        <input onChange={handleChange} />
      </form>
    </div>
  );
}

не совсем уверен чего вы хотите добиться, но мне кажется должно вообще быть как-то так:

function debounce(fn, ms) {
  return (...args) => {
    setTimeout(() => {
      fn.apply(this, args);
    }, ms);
  };
}

Comments

[Scott]

разбирайтесь (ниже рабочий код)

к сожалению, не то. Вы ведь знаете что такое debounce? В ваших обоих вариантах буквы появляются одна за другой, только у первого еще и баг - не отображается последний символ. Правильный debounce должен возвращать один результат целиком (один запрос на сервер), а у вас один за другим. Сравните для примера:
1. ваш вариант
2. мой вариант
Позже выложу свое решение.
Но все равно спасибо за потраченное время.

[Роман]

Scott, про debounce не знаю, никогда такие выверты не использовал. Допускаю что это стандартный подход для решения ряда задач, но несмотря на то что коммент про clearTimeout оказался не "в кассу" коммент про value/args как раз то что вам нужно. Странно что вы этого не видите.

вот рабочий вариант с учетом вашего коммента (изменения отмечены комментариями).

import React, { useState } from 'react';
import './styles.css';

// обратите внимание на отсутствие ...args
function debounce(fn, ms) {
  let timer;

  // обратите внимание на ...args
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, ms);
  };
}

export default function App() {
  const [value, setValue] = useState('');

  const handleChange = e => {
    const { value } = e.target;
    delayHandler(value);
  };

  const delayHandler = debounce(value => {
    alert("пользователь уже некоторое время ничего не набивает, так что отправляю на серв следующее:"+value)
    setValue(value);
  }, 2000);

  return (
    <div className="App">
      <p>Current value: {value}</p>
      <form>
        <input onChange={handleChange} />
      </form>
    </div>
  );
}

[Scott]

Роман,

Странно что вы этого не видите.

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