Tengo una entrada de casilla de verificación para una aplicación de lista de tareas pendientes y, cuando marco la tarea como realizada, se enviará una solicitud al servidor para actualizarla, pero creo que puede ralentizar el servidor, ya que puede marcar y desmarcar la ingrese repetidamente, ¿hay alguna forma de retrasar las solicitudes? por ejemplo, 300 ms después de cambiar la casilla de verificación aquí está mi código
const [todos, setTodos] = React.useState([]); const completedOnChangeHandler = (e, id) => { const x = e.target.checked; console.log(x); axios .patch(`http://127.0.0.1:8000/todo/todos/${id}/`, { completed: x, }) .then( (response) => { console.log(response.data); setTodos([response.data]); }, (error) => { console.log(error); } ); }; return ( <form> {todos.map((todo) => ( <ul key={todo.id}> <li>{todo.title}</li> <li>{todo.description}</li> <button>delete</button> <input type="checkbox" placeholder="completed" onChange={(e) => completedOnChangeHandler(e, todo.id)} checked={todo.completed} /> </ul> ))} </form> ); }; export default Form;Debe recuperar la solicitud y deshabilitar la casilla de verificación mientras la solicitud está en curso para evitar una condición de carrera. Aquí hay un ejemplo de una función de rebote:
function debounce(func, timeout = 300){ let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, timeout); }; } function saveInput(){ console.log('Saving data'); } const processChange = debounce(() => saveInput());O puede usar lodash/debounce, si el paquete lodash está disponible en su proyecto.
Puede usar la función de eliminación de rebote de lodash o, si no desea agregar toda la biblioteca a su proyecto, puede usar: lodash.debouce
Puede establecer la cantidad de tiempo que desea entre solicitudes y lo administrará por usted.
Quizás podría declarar una variable/estado que contenga la hora de la última vez que se verificó su entrada.
Cada vez que el usuario verifica la entrada, compara la hora actual con la última vez que se verificó su entrada. Si el delta es superior a 300 ms, envíe su solicitud http.
Puede usar el módulo Date con el método Date.now() . Este método devuelve el número de milisegundos transcurridos desde el 1 de enero de 1970 a las 00:00:00 UTC.