一个setInterval的小问题
时间:2022-05-03
本文章向大家介绍一个setInterval的小问题,主要内容包括一个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函数作为参数。
- JOJ 2680 Problem F: Coin Game
- React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)
- JOJ 2676 Problem B
- React项目配置2(自己封装Ajax)
- React项目配置1(如何管理项目公共js方法)
- c++中stack、queue、vector的用法一、栈(stack)二、队列(queue)三、向量(vector)
- React技巧7(TodoList实现3组件之间传递数据之优化)
- React技巧6(TodoList实现2组件之间传递数据)
- POJ A Knight's Journey
- React技巧5(TodoList实现)
- 求一个数n次方后的末尾数(数论/快速幂)问题描述解题思路代码实现运行结果参考
- Catch That Cow
- React技巧4(如何处理List里面的Item)
- ZOJ 3620 Escape Time II
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- codeforce 270B Multithreading
- flex-wrap align-content详解
- Code force-CodeCraft-20 (Div. 2) D. Nash Matrix 详解(DFS构造)
- HDU Problem D [ Humble number ]——基础DP丑数序列
- Java开发编程规范: 3.代码格式
- flex-direction
- css中清除浮动方式五
- css中-清除浮动方式四
- forin forof forEach myForEach
- 深拷贝,你懂吗?
- Codeforce-CodeCraft-20 (Div. 2)-C. Primitive Primes(本原多项式+数学推导)
- DOM事件机制(原理级别的)
- 杭电60题--part 1 HDU1003 Max Sum(DP 动态规划)
- js的的的图片随屏幕滚动而滑入滑出的效果(万 万。。。字长文)
- Codeforce-CodeCraft-20 (Div. 2)-B. String Modification (找规律+模拟)