踩坑笔记-setInterval越来越快

踩坑笔记-setInterval越来越快

---

时间：2020年11月27日
在做一个网页时，碰到这样一个需求：ul标签中的内容需要向上滚动，当内容全部显示完毕后，有进行新的一轮滚动。
当时想着直接使用setInterval()定时器来无限循环。在最初的时候，内容的滚动速度确定如预想的一样，但当ajax刷新请求时，慢慢的，内容的滚动速度越来越快。心里凉透了，开始复查代码，没有问题啊。

开始百度：setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

根据以上的博客将setInterval()转变为在方法内部循环调用setTimeout()，开心的以为解决了问题，但滚动的速度更快了，心里WTF
再次百度，发现将每一个setTimeout()都给它定义一个var时，在方法体中clearTimeout()。

var time;  
var show = function() {
	clearTimeout(time);
	time = setTimeout(show, 1000);
}
time = setTimeout(show, 1000);

问题终于解决。。。

示例如下：

CSS:

<style>
body {
	margin: 0;
	padding: 0;
	width: 160px;
	height: 140px;
}
#content {
	width: 160px;
	height: 140px;
}
#content-ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 90px;
	overflow: hidden;
}
#content-ul li {
	font-size: 20px;
	height: 30px;
}
</style>

HTML:

<div id="content">
  	<ul id="content-ul">
		<li>
			弱小
		</li>
		<li>
			可怜
		</li>
		<li>
			无助
		</li>
		<li>
			干他
		</li>
  	</ul>	
  </div>

JS:

<script type="text/javascript">
var ulElement = document.getElementById("content-ul");
var delay = 0;
// 屏幕内容滚动频率200毫秒一次
var speed = 200;
// 内容重置定时器
var startMoveTime;
// 内容滚动定时器
var time;
ulElement.scrollTop = 0;
// 内容滚动的高度
var height = 0;
var startMove = function() {
	// 清除定时器
	clearTimeout(startMoveTime);
	ulElement.scrollTop = 0;
	ulElement.scrollTop++;
	// time = setInterval("scrollUp()", speed);
	time = setTimeout(scrollUp, speed);
}

var scrollUp = function() {
	// 为什么减90，因为容器ul的高度为90
	height = ulElement.scrollHeight - 90;
	// 清除定时器
	clearTimeout(time);
	ulElement.scrollTop++;
	
	if ((ulElement.scrollTop - 1) % height == 0) {
		startMoveTime = setTimeout(startMove, delay);
	} else {
		
		if (ulElement.scrollTop >= height) {
			ulElement.scrollTop = 0;
		}
		
		time = setTimeout(scrollUp, speed);
	}
}
startMoveTime = setTimeout(startMove, delay);
</script>