Как реализовать вызов функции в setTimeout?

Реализую синхронизацию через сокеты. То есть копируешь ссылку сайта, открываешь во второй вкладке браузер и у вас все будет синхронизировано, ввод данных, переход на страницы, добавление товаров и т.д.

Возникли трудности с синхронизацией инпутов. При быстрой печати возникали подергивания, эту проблему я решила так. Здесь я при каждом изменении инпута, сохраняю значение в состоянии и если введен пробел, или пользователь нажал за пределы инпута, происходит отправка данных(синхронизация) т.е. во второй кладке выйдет то, что вы ввели.

import React, { useContext } from 'react'
import { useParams } from 'react-router'
import { Context } from '../..'

const Comment = ({value, setValue}) => {
  const {number} = useParams()
  const {application} = useContext(Context)

  const setCommentToParams = (data) =>{
    setValue(data)
    if(application.comments.find(i => i.category_id === number)){
      let arr = application.comments;
      let obd = application.comments.find(i => i.category_id === number);
      let index = application.comments.indexOf(obd);
      arr[index] = {"category_id": number, "body": data};
      application.setComments(arr);
    }else{
      application.setComments([...application.comments, {"category_id": number, "body": data}]);
    }
    if(data[data.length -1 ] === " "){
      application.setParams(); // синхронизация данных
    }
  }

  return (
    <textarea className="textarea" placeholder="Комментарий..." value={value} onChange={e => {setCommentToParams(e.target.value);}}
    onBlur={ ()=> application.setParams()}>
    </textarea>
  )
}

export default Comment

Метод конечно рабочий, никаких подергиваний. Но хотелось бы полной синхронизаций, для этого решила попробовать установить задержку. Но не могу разобраться, куда ее поставить и как правильно реализовать. Решила попробовать установить в onChange, но это была плохая идея, так как функция все равно вызывалась столько же раз, сколько я вызывала onChange. Нашла что-то про cleartimeout, но не знаю даже как это переплести к моему коду.

const setCommentToParams = (data) =>{
setValue(data)
if(application.comments.find(i => i.category_id === number)){
  let arr = application.comments;
  let obd = application.comments.find(i => i.category_id === number);
  let index = application.comments.indexOf(obd);
  arr[index] = {"category_id": number, "body": data};
  application.setComments(arr);
}else{
  application.setComments([...application.comments, {"category_id": number, "body": data}]);
}
setTimeout(application.setParams(), 2000);
  }

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


Ответы (0 шт):