无法通过同步睡眠在 Javascript 上滚动

Question

I'am writting a code to scroll down with synchronous pauses between scrolls. To achieve synchronous sleep I am using the classic Javascript approach using a While loop with a timer. Here's where it gets wierd, the function works with everything except for scrolling.

ex 1. This WORKS:

function sleep(t) {
  const start = Date.now();
  while (Date.now() - start < t);
}

console.log("hello")
sleep(2000);
console.log("hello 2")
sleep(2000);
console.log("hello 3")
sleep(2000);
console.log("hello 4")
sleep(2000);

Ex 2. This does NOT WORK:

function sleep(t) {
  const start = Date.now();
  while (Date.now() - start < t);
}
elem = document.getElementById("main-div");
elem.scrollBy(0,120);
sleep(2000);
elem.scrollBy(0,120);
sleep(2000);
elem.scrollBy(0,120);
sleep(2000);
elem.scrollBy(0,120);
sleep(2000);

Any Idea what is happening?

Answer 1

I am not sure what you mean by "the code is wrapped in some python script", this in a browser environment. When you run JS code it blocks the current browser window, eg all async actions like user interactions, scrolling, timer callbacks are paused until you yield back to the event loop, and give other events in the queue a chance to run.

Instead of blocking the event loop you could start an interval timer, and disable actions you'd like to prevent from happening until the time is over.

Here is an example: When you click on the "Busy for 8 sec" button, the other "Submit" button is disabled until the time is over, or until you hit the "Busy for 8 sec" button again to stop the timer.

 $('document').ready(function() { $('#busyButton').click(function() { if(timerId) { stopTimer(); return; } else { startTimer(); } }); }); let timerId; function startTimer() { $('#submitButton').prop("disabled", true).css({color: 'gray'}); $('#busyButton').css({color: 'red'}); let count = 0; timerId = setInterval(function() { console.log('count', ++count); if(count >= 8) { stopTimer(); } }, 1000); } function stopTimer() { clearInterval(timerId); timerId = null; $('#submitButton').prop("disabled", false).css({color: 'black'}); $('#busyButton').css({color: 'black'}); }

 .as-console-wrapper { max-height: 7em;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input /> <button id="submitButton">Submit</button> <hr /> <button id="busyButton">Busy for 8 sec</button>