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 相关文章推荐
文本加密解密
Jun 23 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP文件与目录操作示例
2016/12/24 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
javascript常见用法总结
2014/05/22 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python分析作业提交情况
2017/11/22 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
护士辞职信模板
2014/01/20 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
家庭教育的心得体会
2014/09/01 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
初三语文教学计划
2015/01/22 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书