Question

当用户开始滚动滚动条时，我有一个页面开始自动滚动。但我希望滚动在一段时间后停止。以下是我到目前为止但它没有工作。我不认为“回归”;是我应该使用的正确功能，但我找不到任何有用的功能。

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>

Answer 1

您创建的两个功能彼此无关。它们具有相同名称的事实无关紧要。

setTimeout用于安排将来的某些工作。但是，您传递给setTimeout的功能根本不做任何事情，所以这是不必要的。

相反，您必须跟踪第一次调用函数的时间，并检查每次调用函数时已经过了多少时间。如果时间已过，请不要再次致电window.scrollBy(0, 10)以防止重新触发此事件。

＆＃13;

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;

＆＃13;

<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>

＆＃13;

Answer 2

如果你想在X时间后杀死一个JavaScript函数，那么你可能正在寻找超时：

Does calling setTimeout clear the callstack?

尝试使用setTimeout函数：

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

从这个链接：

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

因此，对于您的具体用例：

var startTime;
var stopTime;
function scrollFunction() {

    startTime = Date.now();


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

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

希望有所帮助。

Answer 3

为了使自动滚动停止，定时器关闭，因为默认情况下它是打开的，即值为1.通过将该变量设置为零将导致window.scrollBy（）不执行但是scrollFunction （）仍然很活跃。因此，当没有计时器时，代码将window.onscroll设置为匿名函数，该函数只执行返回操作，从而使scrollFunction失效。

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>

注意，我喜欢@FelixKling使用Date.now（）设置变量来捕获开始时间。因此，我使用Date.now来设置全局开始以及本地现在变量。

如何在一段时间后杀死Javascript函数

3 个答案: