Javascript 如何停止setTimeOut

Question

你好我运行遇到了一个小问题，我不知道如何在它到达我的网络上的某个 Y 位置时停止我的添加功能，有人可以帮助我吗！！

var scroll = function(){
 
 var positionYTop = 0,

  speed = 50,
  links = document.getElementsByTagName('a');

 function timer() {
  var clock = setTimeout(add, 200)
 }

 function add() {
  window.scrollTo(0, positionYTop += speed);
  timer();
 }

 add();
}

Answer 1

不清楚您要用您的特定代码做什么，但停止计时器的一般答案是您将 setTimeout() 的结果保存到一个足够高的变量中作用域或对象的属性，您稍后可以访问它，然后使用它来调用 clearTimeout()。这将停止计时器。

在您当前的代码中，变量 clock 仅对 timer() 函数而言是局部的，因此一旦该函数完成，它将超出范围并且无法访问。您可能需要将 clock 变量移动到更高的范围，以便从您想要停止计时器的任何代码访问它。

或者，如果您要问的问题是如何告诉您的 add() 函数在达到某个位置时停止发出新的 timer() 调用，那么您只需添加一个if() 声明您的 add() 函数，如果满足某些条件则不再调用 timer()。

例如：

function add() {
    window.scrollTo(0, positionYTop += speed);
    if (window.scrollTop < 400) {
        timer();
    }
}

Answer 2

一个常见的方法是先设置滚动，然后在另一个方向上 transform/translateY 来抵消滚动的影响，然后将变换向下过渡到零。

基本上，在这个时代，我们希望 browser/CSS 进行过渡。代码少，使用transform会更流畅

这是一个非常粗略的想法（未经测试，您将需要尝试一下）：

body.start {
  transform: translateY(-400px);
}

body.transitioned {
  transform: translateY(0);
  transition: transform 1s;
}

function scroll() {
  document.body.scrollTop; = 400;
  document.body.classList.add('start');
  setTimeout(function() { document.body.classList.add('transitioned'); }, 100);
}

Javascript 如何停止setTimeOut

Javascript how to stop setTimeOut

javascript

settimeout

smooth-scrolling