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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
javascript常用函数(1)
Nov 04 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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
B2K与车机的中波PK
2021/03/02 无线电
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
destoon二次开发入门示例
2014/06/20 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python赋值操作方法分享
2013/03/23 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python实现多人聊天室
2020/03/31 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
详解python logging日志传输
2020/07/01 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014教师年度工作总结
2014/11/10 职场文书
单位租房协议书范本
2014/12/04 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android