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 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
Javascript创建类和对象详解
May 31 Javascript
vue多次循环操作示例
Feb 08 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
js实现搜索提示框效果
Sep 05 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
深入学习 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开发中AJAX技术的简单应用
2015/12/11 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
javascript连续赋值问题
2015/07/08 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
Vue组件化开发思考
2018/02/02 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
学生实习自我鉴定
2013/10/11 职场文书
通信生自我鉴定
2014/01/18 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
新年主持词
2014/03/27 职场文书
法人委托书范本
2014/09/15 职场文书
爱心助学感谢信
2015/01/21 职场文书
小学校园广播稿
2015/08/18 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS