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 parseInt 大改造
Sep 27 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
tab栏切换原理
Mar 22 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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 xml 入门学习资料
2011/01/01 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP _construct()函数讲解
2019/02/03 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
document.write的几点使用心得
2014/05/14 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
一篇文章快速了解Python的GIL
2018/01/12 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python如何实现数据的线性拟合
2019/07/19 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python selenium xpath定位操作
2020/09/01 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
Python实现简单的2048小游戏
2021/03/01 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
C语言中break与continue的区别
2012/07/12 面试题
2015年销售工作总结范文
2015/03/30 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
如何写好开幕词?
2019/06/24 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
JavaScript原型链详解
2021/11/07 Javascript