JavaScript setTimeout()基本用法有哪些


Posted in Javascript onNovember 04, 2020

在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 js 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结。

  • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为单位)
  • setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()

setTimeout()用法

举个简单的例子

加入下列代码,在打开的页面静候三秒后,弹出警告框“你好”

<script>
  setTimeout("alert('你好')", 3000) 
</script>

效果:

再复杂一些的function定义

<script>
var myvar;

function myFunction() {
  myVar = setTimeout(alertFunc, 3000);
}

function alertFunc() {
 alert("Hello!");
}

自动每秒加 1 的 function

使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度, 例如每五秒就加 5, 或每五秒就加 1。

<script>
x = 0
function countSecond( )
{ x = x+1
  document.fm.displayBox.value=x
  setTimeout("countSecond()", 1000)
}
</script> 
<body bgcolor=lightcyan text=red> <p> </br>
<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>
<script>
countSecond( )
</script>
</body>

用上述的方法设定时间, setTimeout( ) 虽然设定了是一秒, 但浏览器还有另外两项功能要执行, 所以一个循环的时间是稍多于一秒, 例如一分钟可能只有58 个循环。

延时关闭网页

按下按钮,Window open()打开一个网页,执行命令,三秒钟后自动关闭

<button onclick="openWin()">打开 "窗口"</button>
<script>
function openWin() {
  var myWindow = window.open("", "", "width=200, height=100");
  myWindow.document.write("这是一个新窗口");
  setTimeout(function(){ myWindow.close() }, 3000);
}
</script>

取消setTimeout()

当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( )

<button onclick="myFunction()">点我弹出</button>
<button onclick="myStopFunction()">阻止弹出</button>
<script>
var myVar;
function myFunction() {
  myVar = setTimeout(function(){ alert("Hello") }, 2000);
}
function myStopFunction() {
  clearTimeout(myVar);
}
</script>

小结

setTimeout(),clearTimeout() , setInterval() 可以在写代码过程中灵活运用其特点达到需要完成的目的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
详解jQuery-each()方法
Mar 13 jQuery
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 #Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 #Javascript
vant中的toast层级改变操作
Nov 04 #Javascript
vant中的toast轻提示实现代码
Nov 04 #Javascript
JavaScript快速调试的两个技巧
Nov 04 #Javascript
如何实现小程序与小程序之间的跳转
Nov 04 #Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 #Javascript
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
Python实现简单的语音识别系统
2017/12/13 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python speech模块的使用方法
2020/09/09 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
试述DBMS的主要功能
2016/11/13 面试题
最经典的商业地产项目广告词
2014/03/13 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
浅析NIO系列之TCP
2021/06/15 Java/Android