一个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 条评论
登录 后参与评论

相关文章

来自专栏Micro_awake web

es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

1.函数可以设置参数默认值 1 function test1(x,y=1){ 2 console.log(x,y) 3 } 4 te...

16710
来自专栏小狼的世界

PHP中的正则表达式及模式匹配

PHP中对于正则处理文本提供了两种方式,一种是PCRE方式(PCRE库是一个实现了与perl 5在语法和语义上略有差异(详见下文)的正则表达式模式匹配功能的函数...

772
来自专栏柠檬先生

Angularjs基础(二)

AngularJS 表达式   AngularJS 表达式写在双大括号内:{{expression}}   AngularJS 表达式把数据绑定到HTML,...

1896
来自专栏诸葛青云的专栏

简述在C语言中, “字符”与“字符串”之间的区别

在C语言中,“字符”与“字符串”之间,是有区别的。这一篇文章中,我们将介绍一下,在C语言中的“字符”与“字符串”,它们之间的区别。

833
来自专栏ACM小冰成长之路

51Nod-1443-路径和树

ACM模版 描述 ? 题解 这个题是单源最短路 + 最小生成树。 首先我们来介绍一下题中所述的最短路径树是什么,我们都知道,给定一个 uu 求单源最短路时,所有...

16610
来自专栏木子昭的博客

模拟Vue数据的双向绑定

Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向...

3265
来自专栏无所事事者爱嘲笑

关于setTimeout和setInterval的函数参数问题

1302
来自专栏Jack-Cui

67.Add Binary(String-Easy)

Given two binary strings, return their sum (also a binary string). For example, ...

1686
来自专栏Jerry的SAP技术分享

深入理解Java的整型类型:如何实现2+2=5?

可能有的朋友对于doSomethingMagic里面的代码有点摸不着头脑,让我们先查看上图第17行 2 + 2反编译出来的代码:

801
来自专栏杂七杂八

BeautifulSoup使用

Beautiful Soup将复杂HTML文档转换成一个复杂的树形结构,每个节点都是Python对象,所有对象可以归纳为4种: Tag , NavigableS...

773

扫描关注云+社区