Javascript如何停止setTimeOut [英] Javascript how to stop setTimeOut

问题描述

Hellow
我遇到了一个小问题我不知道如何在我的网络上达到某个Y位置时停止我的添加功能，有些身体可以帮助我发送它！

Hellow I ran into a little problem i don't know how to stop my add function when it reaches some Y position on my web, can some body help me whit it!!

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

推荐答案

常见的方法是先提前设置滚动，然后在另一个方向上设置transform / translateY以抵消滚动效果，然后将转换转换为零。

A common approach to this is to start off by setting the scroll in advance, along with a transform/translateY in the other direction to offset the effect of the scroll, then transition the transform down to zero.

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

Basically, in this day and age, we want the browser/CSS to do the transition. It's less code, and using transform it will be much smoother.

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

Here's a very rough idea (not tested, you will need to play with it):

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！