JS中SetTimeout和SetInterval使用初探


Posted in Javascript onMarch 23, 2017

一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
<div class="wraper"></div> 
<div class="wraper1">abcd123441223432 </div> 
<button onclick="clearIt=window.clearInterval(clearIt)"> 
  Stop</button> 
<script> 
  window.onload = function () { 
    $('.wraper').html('12343242342') 
    setTimeout(function () { 
      $('.wraper').hide(); 
      setTimeout(function () { 
        $('.wraper1')[0].style.backgroundColor = 'red'; 
        console.log(new Date(),"in"); 
      },20000); 
      console.log(new Date(),"out"); 
    },10000); 
  } 
  var clearIt=self.setInterval("setIntervalTest()",1000); 
  function setIntervalTest () { 
    console.log('++++'); 
  } 
</script> 
<script type="text/javascript" src="jquery/jquery-min.js"></script> 
</body> 
</html>

JS中SetTimeout和SetInterval使用初探JS中SetTimeout和SetInterval使用初探JS中SetTimeout和SetInterval使用初探

补充:下面看下setTimeout和setInterval的相同处及区别介绍

setTimeout和setInterval的相同处

setTimeout和setInteval 都是window对象的定时方法,它们语法基本上相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

setTimeout和setInterval的区别

setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。

setInterval方法则是表示间隔一定时间反复执行某操作。

如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。

如果要清除定时器则根据创建定时器时使用的方法调用不同的清除方法:

例如:

timer=setTimeout('startShow()',2000);
clearTimeout(timer);

或者:

timer=setInterval('startShow()',2000);
clearInterval(timer);

以上所述是小编给大家介绍的JS中SetTimeout和SetInterval使用初探,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
深入学习 JavaScript中的函数调用
Mar 23 #Javascript
js中toString()和String()区别详解
Mar 23 #Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 #Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 #Javascript
angularJS深拷贝详解
Mar 23 #Javascript
canvas实现环形进度条效果
Mar 23 #Javascript
You might like
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php安装swoole扩展的方法
2015/03/19 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
javascript new后的constructor属性
2010/08/05 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python实现控制COM口的示例
2019/07/03 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
电气专业应届生求职信
2013/11/01 职场文书
师范大学应届生求职信
2013/11/21 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
小学开学典礼主持词
2014/03/19 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL