No estoy seguro de que se llame desplazamiento infinito, pero básicamente tengo una tabla con varios miles de líneas que muestro en un sitio web de ASP.Net Core. La tabla tiene un diseño avanzado donde el estilo depende en gran medida del contenido de la celda. Lleno el contenido y el estilo de las filas a través del controlador y publico un archivo JSON.
Puedo mostrar, digamos, 20 filas de la tabla gracias a JS fetch api. Puedo desplazarme a las filas adyacentes suavemente
También agregué una barra de desplazamiento separada, para que pueda saltar a cualquier fila desde la primera hasta la última.
El problema es que cuando dejo de mover la barra de desplazamiento, las filas aún se actualizan durante unos segundos (con algunas filas intermedias, pero afortunadamente no todas) hasta que se alcanzan las de destino. Parece que hay algún retraso, como si tuviera varias llamadas asincrónicas esperando para procesar la función de actualización que se ejecuta una tras otra.
¿Hay alguna manera de considerar solo la última llamada a la función de actualización?
$('#fields-scroll').on('input change', async function () { var row = $('#fields-scroll').val(); await scroll(row); }); async function scroll(row) { // Posts the metrics to the controller. const response = await fetch(`${window.location.href}Fields/Interact/`, { method: 'POST', body: JSON.stringify({ Row: row}), headers: { 'Content-Type': 'application/json; charset=utf-8' } }); // Gets the results from the controller. const results = await response.json(); // Makes sure that there are actual results. if (results == null) { return; } var fields = results.fields; await populate(fields); }¡Gracias por cualquier ayuda!
Creo que la forma más fácil (sin usar bibliotecas externas como redux-saga) sería usar un antirrebote simple para evitar el rebote de la acción de desplazamiento:
const handler = _.debounce(async function () { console.log('SCROLLING'); try { const row = $('#fields-scroll').val(); await scroll(row); } catch (e) { console.log(e); } }, 200); $('#fields-scroll').on('input change', handler); async function scroll(row) { // Posts the metrics to the controller. const response = await fetch(`${window.location.href}Fields/Interact/`, { method: 'POST', body: JSON.stringify({ Row: row }), headers: { 'Content-Type': 'application/json; charset=utf-8', }, }); // Gets the results from the controller. const results = await response.json(); // Makes sure that there are actual results. if (results == null) { return; } var fields = results.fields; await populate(fields); } <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" id="fields-scroll" />Si este es el efecto deseado, puede ajustar el tiempo de rebote según sus preferencias. En cualquier caso, recuerde siempre envolver las declaraciones dentro de una función asíncrona dentro de un bloque try-catch, o no detectará los errores lanzados.
Increíble, parece funcionar perfectamente bien!
Probablemente necesite ajustar un poco el tiempo para obtener algunas actualizaciones intermedias (y tener una idea de lo que hay debajo del capó :-)), pero al menos no sigue actualizándose durante unos segundos cuando dejo de mover la barra de desplazamiento.
PD: acabo de cambiar la const a var , porque falla cuando actualizo la página (más precisamente cuando vuelvo a la página de campos).