Javascript variable reference and/or copy-CodePudding

i have e video that i am scrolling with my mousewheel. Everything is working fine but i would like to check if the user is still scrolling and if it is not so after 10 seconds i would like the video/scrollposition to set-back to zero.

The set-back is working but it is not happing after the "Interval". It is jumping back immediately.

This is my code so far:

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);
      }
}

CodePudding user response：

Listen to the scroll event listener. With a debounce-like function you can start a timeout that will run whenever the use stops scrolling.

The example below uses the aformentioned technique and shows a message whenever the user stops scrolling for 1 second.

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>

CodePudding user response：

I think your concept is wrong. I made a little demo how to implement it. It will print the message after 4 sec "inactivity" on button.

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>

CodePudding user response：

You are updating the lastcurrentTime every 33.3ms and you're calling checkTime every 10s. So almost every time you call the checkTime, the lastcurrentTime will be synced with the video.currentTime.

I think that I would try something like this:

  let setbackTimeout
  scene.on("update", e => {
    clearTimeout(setbackTimeout);
    scrollpos = e.scrollPos / 3000; //the higher the number, the slower
    setbackTimeout = setTimeout(checkTime, 10000);
  });

every time you get an update you clear the countdown to setback and create another that you execute 10s later.