Javascript 如何停止 setTimeOut

Question

Hellow我遇到了一个小问题，我不知道当它到达我的网络上的某个 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()调用，那么您只需向add()函数添加 if() 语句，并且在满足某些条件时不再调用timer()。

例如：

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

Answer 2

一种

常见的方法是首先提前设置滚动，同时在另一个方向上进行变换/平移Y以抵消滚动的效果，然后将变换向下转换为零。

基本上，在这个时代，我们希望浏览器/CSS进行过渡。它的代码更少，使用转换它会更流畅。

这是一个非常粗略的想法（未经测试，您需要使用它）：

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