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 相关文章推荐
js 函数调用模式小结
Dec 26 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JS返回顶部实例代码
Aug 09 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
Vue实现todo应用的示例
Feb 20 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
如何做到多笔资料的同步
2006/10/09 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python实现扫描ip地址的小程序
2019/04/16 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Python和Sublime整合过程图示
2019/12/25 Python
python 爬取疫情数据的源码
2020/02/09 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
如何学习Python time模块
2020/06/03 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
C有"按引用传递"吗
2016/09/06 面试题
《日月潭》教学反思
2014/02/28 职场文书
唐山大地震观后感
2015/06/05 职场文书
自信主题班会
2015/08/14 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers