Tengo un video en el que me desplazo con la rueda del mouse. Todo funciona bien, pero me gustaría comprobar si el usuario sigue desplazándose y, si no es así, después de 10 segundos, me gustaría que la posición de vídeo/desplazamiento vuelva a cero.
El retroceso funciona pero no ocurre después del "Intervalo". Está saltando hacia atrás inmediatamente.
Este es mi código hasta ahora:
const action = document.querySelector(".action"); const video = action.querySelector("video"); //Scroll Magic scenes const controller = new ScrollMagic.Controller(); let scene = new ScrollMagic.Scene({ duration: 200000, //64000 triggerElement: action, triggerHook: 0 }) .addIndicators() .setPin(action) .addTo(controller); //Scroll Magic video animation let accelAmount = 0.1; let scrollpos = 0; let currentTime = video.currentTime; let lastcurrentTime; let delay = 0; scene.on("update", e => { scrollpos = e.scrollPos / 3000; //the higher the number, the slower }); //Move setInterval(() => { delay += (scrollpos - delay) * accelAmount; video.currentTime = delay; console.log(video.currentTime + " reading"); lastcurrentTime = video.currentTime; }, 33.3); //check if is still scrolling after x seconds setInterval(checkTime, 10000); //funktion to execute the check function checkTime() { console.log("waiting for new reading"); console.log(video.currentTime + " newreading"); currentTime = video.currentTime; if (currentTime === lastcurrentTime) { //is not scrolling -- go to start //video.currentTime = 0; window.scrollTo(0, 0); } }Escuche el detector de eventos de scroll . Con una función similar a un rebote, puede iniciar un tiempo de espera que se ejecutará cada vez que el usuario deje de desplazarse.
El siguiente ejemplo utiliza la técnica mencionada anteriormente y muestra un mensaje cada vez que el usuario deja de desplazarse durante 1 segundo.
function scrollTracker(delay, callback) { let timeout = null; return function(...args) { if (timeout !== null) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(callback, delay, ...args) }; } const tracker = scrollTracker(1000, () => { console.log('User stopped scrolling. Handle your video here'); }); window.addEventListener('scroll', tracker); #page { height: 20000px; } <div id="page"></div>Está actualizando lastcurrentTime cada 33.3ms y está llamando a checkTime cada 10s . Entonces, casi cada vez que llame a checkTime , lastcurrentTime se sincronizará con video.currentTime .
Creo que intentaría algo como esto:
let setbackTimeout scene.on("update", e => { clearTimeout(setbackTimeout); scrollpos = e.scrollPos / 3000; //the higher the number, the slower setbackTimeout = setTimeout(checkTime, 10000); });cada vez que recibe una actualización, borra la cuenta regresiva para retroceder y crea otra que ejecuta 10 segundos después.
Creo que tu concepto está mal. Hice una pequeña demostración de cómo implementarlo. Imprimirá el mensaje después de 4 segundos de "inactividad" en el botón.
const btn = document.querySelector("button") let myInterval = setInterval(myPrint, 4000) btn.addEventListener("click", () => { clearInterval(myInterval) myInterval = setInterval(myPrint, 4000) }) function myPrint(){ clearInterval(myInterval) console.log("programming <3") } <button>Click me!</button>