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 相关文章推荐
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
原生js实现弹出层效果
Jan 20 Javascript
Vue组件开发初探
Feb 14 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
php准确获取文件MIME类型的方法
2015/06/17 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python socket实现简单聊天室
2018/04/01 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
金讯Java笔试题目
2013/06/18 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
个人工作年终总结
2015/03/09 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
毕业生入职感言
2015/07/31 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏