Colocación de los manipuladores hasta el evento de desplazamiento de ventana

Question

John Resig sugiere usar setInterval() con el fin de reducir el número de veces que el controlador se llama - ver http://ejohn.org/blog/learning-from-twitter/

solución de Juan de la entrada en el blog:

var outerPane = $details.find(".details-pane-outer"), 
    didScroll = false; 

$(window).scroll(function() { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     didScroll = false; 
     // Check your page position and then 
     // Load in more results 
    } 
}, 250); 

Puede invocar un intervalo continuo ¿realmente es una idea sensata?

¿Tendría más sentido el enfoque de Michael Jackson ya que no significa que estamos constantemente sondeando?

solución de Michael de los comentarios:

var timer = 0; 

$(window).scroll(function() { 
    if (timer) { 
    clearTimeout(timer); 
    } 

    // Use a buffer so we don't call myCallback too often. 
    timer = setTimeout(myCallback, 100); 
}); 

¿Alguien puede compartir algún consejo/opinión?

Rich

Answer 1

enfoque de John Resig es la más sensata. El evento scroll se distribuye ALOT en la mayoría de los navegadores modernos. Para una acción de desplazamiento rápido de solo 50px en el eje y, podría despacharse entre 20 y 30 veces. Si tiene un controlador invocado durante cada uno de esos eventos, bloqueará el subproceso de la interfaz de usuario y el desplazamiento será espasmódico (como señala John).

Además, tenga en cuenta que una función rápida que se ejecuta cada 50 ms no es un gran problema en los navegadores modernos. Esa es una invocación de función cada 5 o 6 cuadros. Lo que intenta evitar es una invocación de función en cada cuadro, que es lo que ocurre si utiliza el evento de desplazamiento.

Editado

Oh, lo siento, me perdí ese comentario cuando me envió la primera versión (que sólo buscaba el cargo por el nombre de MJ no los comentarios). La limitación de velocidad del controlador scrollEvent es un enfoque inteligente +1. De hecho, me gusta más que la estrategia de Resig porque vas a siempre obtener el primer evento de desplazamiento cuando sucede y luego limitar cada otro evento de desplazamiento lanzado después de él a un máximo de una vez por cada 100ms.

Con el enfoque de Resig, podría retrasarse hasta 100 ms antes de que se notifique la devolución de llamada de un evento de desplazamiento. La demora de 100 ms podría ser percibida como una interfaz lenta por los usuarios más exigentes.

Answer 2

Estaba leyendo la misma publicación, pero finalicé con un enfoque mixto.

Ni Jhon Resig ni MJ estuvieron bien conmigo. aunque realmente apreciará la luz que ponen en mi investigación

Aquí está mi código, que se ejecuta tan pronto como el evento es disparado, pero ejecute sólo una vez cada 250 ms, cuando es "re-activar"

var scrollEnabled = true; 

$(window).on('scroll', function(event) { 
    if (!scrollEnabled) { 
    return; 
    } 
    scrollEnabled = false; 
    console.log('i am scrolling'); 
    return setTimeout((function() { 
    scrollEnabled = true; 
    console.log('scroll enabled now'); 
    }), 250); 
});