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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
javascript 自定义事件初探
Aug 21 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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
星际实力自我测试
2020/03/04 星际争霸
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
url decode problem 解决方法
2011/12/26 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
javascript学习网址备忘
2007/05/29 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
angular.element方法汇总
2015/01/07 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python 函数传参之传值还是传引用的分析
2017/09/07 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
flask-restful使用总结
2018/12/04 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
对Python中画图时候的线类型详解
2019/07/07 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
django实现日志按日期分割
2020/05/21 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
爱护公物标语
2014/06/24 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
预备党员转正意见
2015/06/01 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸