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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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面向对象中的魔术方法中文说明
2014/03/04 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python中extend和append的区别讲解
2019/01/24 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python操作文件的参数整理
2019/06/11 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
SQL Server数据库笔试题和答案
2016/02/04 面试题
工作决心书
2014/03/11 职场文书
影子教师研修方案
2014/06/14 职场文书
安全口号大全
2014/06/21 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2016新年感言
2015/08/03 职场文书
学校体育节班级口号
2015/12/25 职场文书
初中政治教学反思
2016/02/23 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技