How to kill Javascript function after a certain amount of time

Question

I have a page that begins to scroll automatically when the user begins to scroll the scrollbar. But I want the scrolling to stop after a certain amount of time. Below is what I have so far but it is not working. I don' think that "return;" is the right function I should be using but I can't find anything that does work.

function scrollFunction() {
  window.scrollBy(0, 10);
}

window.onscroll = scrollFunction;

setTimeout(function scrollFunction() {
    return;
}, 2000);

<div style="height:1000px; background-color:red;"></div>
<div style="height:1000px; background-color:green;"></div>
<div style="height:1000px; background-color:blue;"></div>
<div style="height:1000px; background-color:black;"></div>

The two functions you created have nothing to do with each other. — Felix Kling, Oct 25 '17 at 23:15

Felix Kling · Accepted Answer · 2017-10-26T00:04:24.427

The two functions you created have nothing to do with each other. The fact that they have the same names is irrelevant.

setTimeout is used to schedule some work in the future. But the function you pass to setTimeout doesn't do anything at all, so it's unnecessary.

Instead, you have to keep track of when the function was called the first time and check how much time has passed every time the function is called. If enough time has passed, don't call window.scrollBy(0, 10) again to prevent re-triggering the event.

var startTime;
function scrollFunction() {
  if (!startTime) {
    // Called for the first time
    startTime = Date.now();
  } else if (Date.now() - startTime > 2000) {
    // Stop condition. Have 2 seconds passed?
    startTime = null;
    return;
  }
  window.scrollBy(0, 10);
}

window.onscroll = scrollFunction;

<div style="height:1000px; background-color:red;"></div>
<div style="height:1000px; background-color:green;"></div>
<div style="height:1000px; background-color:blue;"></div>
<div style="height:1000px; background-color:black;"></div>

score 0 · Answer 2 · answered Oct 25 '17 at 23:25

If you want to kill a JavaScript function after X amount of time, a Timeout maybe what you are looking for:

Does calling setTimeout clear the callstack?

Try using the setTimeout function:

setTimeout(function(){ alert("Hello"); }, 3000);

From this link:

https://www.w3schools.com/jsref/met_win_settimeout.asp

So for your specific use case:

var startTime;
var stopTime;
function scrollFunction() {

    startTime = Date.now();


function testFunction() {
    alert("Test");
 }

 if (x > y) {
      stopTime = Date.now() - startTime
      setTimeout(function(){ testFunction(); }, stopTime );
  }

Hope that helps.

How exactly does the timeout "kill" the function? – Felix Kling Oct 26 '17 at 00:05 — Felix Kling, Oct 26 '17 at 00:05

slevy1 · Answer 3 · 2017-10-26T01:09:34.887

In order to make the auto scroll stop, the timer is turned off since by default it is on, i.e. has a value of 1. By setting that variable to zero will cause window.scrollBy() to not execute but the scrollFunction() is still quite alive and well. So, when there is no timer, then the code sets window.onscroll to an anonymous function that does nothing more than return, thereby rendering the scrollFunction out of commission.

var timer = 1;
var elapsed = 5000;
var start = Date.now();

function scrollFunction() {
  var now = Date.now();
  
  if (timer) {
    window.scrollBy(0, 10);
    if (now - start > elapsed ) {
      timer=0;
      return;
    }
  }
  else
  {
    window.onscroll = function(){
        return;
    };
  }
}


window.onscroll = scrollFunction;

<body>

<div style="height:1000px; background-color:red;">



</div>

<div style="height:1000px; background-color:green;">



</div>

<div style="height:1000px; background-color:blue;">



</div>
<div style="height:1000px; background-color:black;">



</div>
</body>

Note, I like what @FelixKling did with setting a variable using Date.now() to capture the start time. So, I use Date.now to set a global start as well as a local now variable.

The timeout is completely unnecessary. The function you pass to `setTimeout` doesn't do anything. — Felix Kling, Oct 25 '17 at 23:52
I'm not saying it doesn't work. It does stop the scrolling when I click, though I don't know if that is what the OP wants. However, it works only because of the `timer` flag. `t` and calling `setTimeout` is completely unnecessary. See, it works the same when I remove it: https://jsfiddle.net/h6k1kjcu/ . — Felix Kling, Oct 26 '17 at 00:03
@FelixKling You're right and I removed the timeout code -- thanks for your feedback. — slevy1, Oct 26 '17 at 00:06

How to kill Javascript function after a certain amount of time

3 Answers3