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 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
JS实现图片切换效果
Nov 17 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
vuex的使用步骤
Jan 06 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中for循环语句的几种变型
2007/03/16 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
php防止用户重复提交表单
2015/11/02 PHP
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python黑魔法之参数传递
2016/02/12 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python Paramiko使用示例
2020/09/21 Python
python如何对链表操作
2020/10/10 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
文化与传播毕业生求职信
2014/03/09 职场文书
校庆活动方案
2014/03/31 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
学校党支部承诺书
2015/04/30 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Python语言内置数据类型
2022/02/24 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫