一个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函数作为参数。
- Asp.Net4.0/VS2010新变化(5):可扩展的(分布式)缓存
- Pandas对行情数据的预处理
- 上市公司*ST华泽官网打不开,域名已被挂出售卖
- Asp.Net4.0/VS2010新变化(4):SEO的改进
- Pandas DataFrame笔记
- 让控件填满整个页面
- 用多个类别来进行微调
- Asp.Net4.0/VS2010新变化(2):网站自动预热
- Asp.Net4.0/VS2010新变化(1):web.config与publish
- 任天堂将推出Nintendo Labo 域名保护意识墙
- 表格效果
- ROR学习笔记(2):Asp.Net开发者看ROR
- 图片的javascript延时加载
- 全世界最短IE判定if(!+[1,])的解释
- 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 数组属性和方法
- Mitmproxy 的安装与使用案例
- leetcode之Bigram分词
- TensorFlow2 开发指南 | 01 手写数字识别快速入门
- Spring 数据初始 H2 后进行数据查询提示 Schema not found 错误
- Discourse CentOS 8 全新安装手册
- H2 数据库插入时间的方法
- Spring 配置的 H2 控制台 frameOptions 导致无法访问
- Spring Boot 和 Hibernate 的 H2 数据库配置来进行启动测试
- Java时间处理-LocalDateTime简介
- iOS音视频接入 - TRTC iOS端真机日志导出
- jQuery根据填写的input的数值导出excel表格
- 小程序根据返回值英文渲染出对应的中文
- 小程序返回的时间戳转化成时间
- 小程序使用 组件库 vant-weapp详细教程
- 小程序数据渲染根据返回值计算百分比并且显示