HTML5学堂-码匠 HTML5学堂

您当前位于:高级JS、面向对象 ——> 原生JavaScript setInterval的相关问题

原生JavaScript setInterval的相关问题

2015/05/09 15:47:28 | 作者:HTML5学堂(码匠) | 分类:高级JS、面向对象 | 关键词:JavaScript,计时器,setInterval

一个setInterval的小问题

HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停的调用函数,直到clearInterval()被调用或窗口被关闭。在setInterval使用的时候,有些小细节,我们也是需要注意的。

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

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

写法一

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>setInterval?!</title>
  6. </head>
  7. <body>
  8.     <script>
  9.          setInterval(move,1000);
  10.          function move(){
  11.              alert(1)
  12.          }
  13.     </script>
  14. </body>
  15. </html>

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

写法二

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>setInterval?!</title>
  6. </head>
  7. <body>
  8.     <script>
  9.          setInterval("move()",1000);
  10.          function move(){
  11.              alert(1)
  12.          }
  13.     </script>
  14. </body>
  15. </html>

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

欢迎沟通交流~HTML5学堂

写法三

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>setInterval?!</title>
  6. </head>
  7. <body>
  8.     <script>
  9.          setInterval(move(),1000);
  10.          function move(){
  11.              alert(1)
  12.          }
  13.     </script>
  14. </body>
  15. </html>

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

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

而setInterval(move(),1000)呢?

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>setInterval?!</title>
  6. </head>
  7. <body>
  8.     <script>
  9.          setInterval(move(),1000);
  10.          function move(){
  11.              alert(1)
  12.              return move;
  13.          }
  14.     </script>
  15. </body>
  16. </html>

这样就OK了~。

小结:

move()和move是不相同的,move()是语句,表示要立即执行这个函数的意思;

move则是一个函数对象,代表了这个函数本身,本身是不会运行的,可以把它赋值给其他对象或作为其他函数的参数。就像咱们写的这个例子,把move赋值给setInterval函数作为参数。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端