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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
react-router实现按需加载
May 09 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
js实现随机数小游戏
Jun 28 Javascript
js实现微信聊天界面
Aug 09 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHPMailer发送邮件
2016/12/28 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Python字符串替换实例分析
2015/05/11 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python实现的购物车功能示例
2018/02/11 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
文员个人求职自荐信
2013/09/21 职场文书
个人找工作的自我评价
2013/10/17 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
入党转预备思想汇报
2014/01/07 职场文书
年度评优评先方案
2014/06/03 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers