为什么setInterval()定时器执行时输出顺序会有问题？？？

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<a href="javascript:;" onclick="tDMotion(5)">加载特定数据</a>

	</body>

	<script src="js/jquery-1.11.2.min.js"></script>

	<script>

			function commonMotion(num){

				var i = 0;

				commonMotionId = setInterval(function(){

					i++;

					console.log("i"+"====="+i+"==="+commonMotionId);

					if(i == num){

						i = 0;

					}

				},800);

			};

			var tDMotionId = null;

			function tDMotion(num){

				console.log(commonMotionId);

				clearInterval(commonMotionId);

				var b = 0;

				//为什么不能在function()提供参数来传递数据了？

				tDMotionId = setInterval(function(){

						//b++;

						if(b<num){

							b++;

							console.log("b"+"====="+b+"==="+tDMotionId);

						}else if(b == num){

							setInterval(tDMotionId);

							commonMotion(20)

						}

				},800);

			};


			$(function(){

				commonMotion(10);

			});

	</script>

</html>

问题：
为什么当tDMotionId定时器的变量b放在if语句内，再点击加载特定数据后在运行名为tDMotionId定时器方法后再调用名为commonMotionId定时器后，而它输出数据却是乱了而且其定时器方法的周期也失效了，这是为什么了？而把tDMotionId定时器的变量b放在if语句上面就不会出错，它们的数据却不会出错的，它们的定时器方法是无误的，这又是为什么了？

4 个解决方案

#1

兄台，你的commonMotionId未定义吧，还有var tDMotionID=null 要放到 function tdMotion()里面吧，没玩过JS的定时器，说的不对，多包涵为什么setInterval()定时器执行时输出顺序会有问题？？？

#2

引用 1 楼 z1729734271 的回复:

兄台，你的commonMotionId未定义吧，还有var tDMotionID=null 要放到 function tdMotion()里面吧，没玩过JS的定时器，说的不对，多包涵

不行喔！有没有了解setInterval定时器方法运行原理的前辈啊，真想知道为什么啊？？？为什么setInterval()定时器执行时输出顺序会有问题？？？

#3

#4

引用 3 楼 jslang 的回复:

function tDMotion(num){
console.log(commonMotionId);
clearInterval(commonMotionId);
var b = 0;
//为什么不能在function()提供参数来传递数据了？
clearInterval(tDMotionId);//在创建新定时器之前先取消上一次的定时器，不然会有两个一样的定时器在同时执行
tDMotionId = setInterval(function(){
//b++;
if(b<num){
b++;
console.log("b"+"====="+b+"==="+tDMotionId);
}else if(b == num){
setInterval(tDMotionId);
commonMotion(20)
}
},800);
};

前辈我添加你的代码后还是不行喔，但把你那个红色的代码替换setInterval(tDMotionId);它们的顺序就不会乱了，还是你的红色说明点醒了我，太感谢你了！！！为什么setInterval()定时器执行时输出顺序会有问题？？？

#1

#2