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

相关文章

来自专栏xx_Cc的学习总结专栏

iOS底层原理总结 - 探寻KVO本质

31910
来自专栏Netkiller

Solidity 智能合约开发语言·数据类型

中国广东省深圳市龙华新区民治街道溪山美地 518131 +86 13113668890 <netkiller@msn.com>

64510
来自专栏偏前端工程师的驿站

JS魔法堂:那些困扰你的DOM集合类型

一、前言                                     大家先看看下面的js,猜猜结果会怎样吧!   可选答案:   ①. 获取id属...

1809
来自专栏偏前端工程师的驿站

JS魔法堂:追忆那些原始的选择器

一、前言                                                                            ...

1797
来自专栏陈满iOS

iOS中Block的用法,举例,解析与底层原理(这可能是最详细的Block解析)

【摘要】这篇文章,首先在第1节中介绍Block的定义,以及与C里面函数的对比。然后,第2节介绍实际开发中经常会用到的Block语法形式,以供读者日后查阅。只知道...

582
来自专栏守候书阁

实例感受-es6的常用语法和优越性

前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的...

603
来自专栏Golang语言社区

【JS游戏编程基础】关于js里的this关键字的理解

this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字...

41810
来自专栏陈满iOS

iOS开发小坑·不要initWithFrame和init两个方法都放

511
来自专栏老马寒门IT

前端面试题:JS中的let和var的区别

最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下,以便各位以后面试中使用。...

32310
来自专栏咸鱼不闲

jsoup爬虫工具的简单使用

解决方案: 1.通过url 获得doucment对象, 2.调用select()等方法获得Elements对象, 3.调用.text()等方法,获得自己想要的内...

884

扫码关注云+社区