一个setInterval的小问题

一个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种写法~

写法三

<!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学堂(h5course-com)

原文发表时间:2015-10-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

jQuery文档对象模型DOM的实际应用

DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

843
来自专栏Golang语言社区

Go语言实现猜数字小游戏的方法

package main import ( "bufio" "fmt" "math/rand" "os" "strconv" ...

3105
来自专栏前端大白专栏

关于css选择器的问题 + * ~这三个有什么区别

1714
来自专栏落花落雨不落叶

block,inline,inline-block的区别

2668
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1789
来自专栏栗霖积跬步之旅

1.react的基础知识

React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

2826
来自专栏GreenLeaves

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

2108
来自专栏liulun

riot.js教程【六】循环、HTML元素标签

前文回顾 riot.js教程【五】标签嵌套、命名元素、事件、标签条件 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】...

2378
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

3899
来自专栏王磊的博客

jquery的扩展方法介绍

  最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种...

35811

扫码关注云+社区