一个setInterval的小问题_set interval写结果题-CSDN博客

本文链接：https://blog.csdn.net/somous_ly/article/details/38370819

今天在答疑时发现了一个setInterval的小问题，在这里总结一下。

首先咱们先来看个小例子：

写法一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setInterval?!</title>
</head>
<body>
	<script>
		 setInterval(move,1000);
		 function move(){
		 	alert(1)
		 }
	</script>
</body>
</html>

这是一个最简单的计时器小例子，也是setInterval最标准的写法。咱们再来看看第二种写法~

写法二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setInterval?!</title>
</head>
<body>
	<script>
		 setInterval("move()",1000);
		 function move(){
		 	alert(1)
		 }
	</script>
</body>
</html>

这样写setInterval同样能正常调用move函数，再来看看第3种写法~

写法三

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setInterval?!</title>
</head>
<body>
	<script>
		 setInterval(move(),1000);
		 function move(){
		 	alert(1)
		 }
	</script>
</body>
</html>

这种写法能发现move只运行了一次。为什么呢？

原因很简单，setInterval要求第一个参数必须是含Javascript命令的字符串或函数对象，所以setInterval("move()",1000)以及setInterval(move,1000)，这两个都是正确的。

而setInterval(move(),1000)呢？

当Javascript运行到这个语句时，会立即执行move这个函数，然后把函数的返回值作为setInterval的第一个参数，而由于move函数没有返回值，实际就相当于setInterval(null, 1000)这个当然就不会运行啦，表面看起来就是move只运行了一次。那么咱们改一改看看。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setInterval?!</title>
</head>
<body>
	<script>
		 setInterval(move(),1000);
		 function move(){
		 	alert(1)
		 	return move;
		 }
	</script>
</body>
</html>