Как реализовать вызов функции в 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);
}
Как правильно реализовать вызов функции с задержкой?