一个setInterval的小问题
HTML5学堂：在制作页面动画效果中，很多情况都会用到定时器，setInterval则是计时器的一种，可按照指定的周期，不停的调用函数，直到clearInterval()被调用或窗口被关闭。在setInterval使用的时候，有些小细节，我们也是需要注意的。
今天在答疑时发现了一个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种写法~
欢迎沟通交流~HTML5学堂
写法三
-
<!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>
这样就OK了~。
小结：
move()和move是不相同的，move()是语句，表示要立即执行这个函数的意思；
move则是一个函数对象，代表了这个函数本身，本身是不会运行的，可以把它赋值给其他对象或作为其他函数的参数。就像咱们写的这个例子，把move赋值给setInterval函数作为参数。
欢迎沟通交流~HTML5学堂
极客编程技术分享
