JS中SetTimeout和SetInterval使用初探

 更新时间:2017年03月23日 10:07:46   作者:净心净意  
这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下

一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧!

<!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> 

补充:下面看下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使用初探,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • ES6知识点整理之函数数组参数的默认值及其解构应用示例

    ES6知识点整理之函数数组参数的默认值及其解构应用示例

    这篇文章主要介绍了ES6知识点整理之函数数组参数的默认值及其解构应用,结合实例形式分析了ES6函数数组参数解构赋值和默认值的设置相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • Javascript读写cookie的实例源码

    Javascript读写cookie的实例源码

    今天小编就为大家分享一篇关于Javascript读写cookie的实例源码,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • javascript创建createXmlHttpRequest对象示例代码

    javascript创建createXmlHttpRequest对象示例代码

    这篇文章主要介绍了javascript创建createXmlHttpRequest对象的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • js回调函数仿360开机

    js回调函数仿360开机

    这篇文章主要为大家详细介绍了js回调函数仿360开机,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS调用Android、Ios原生控件

    JS调用Android、Ios原生控件

    本文主要介绍了JS调用Android、Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时,提高代码质量,实现两者在网页端代码的统一。下面跟着小编一起来看下吧
    2017-01-01
  • JS继承与闭包及JS实现继承的三种方式

    JS继承与闭包及JS实现继承的三种方式

    大家都知道,面向对象的三大特征——封装、继承、多态。下面通过本文给大家介绍JS继承与闭包及JS实现继承的三种方式,感兴趣的朋友一起看看吧
    2017-10-10
  • 如何在JavaScript中等分数组的实现

    如何在JavaScript中等分数组的实现

    这篇文章主要介绍了如何在JavaScript中等分数组的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 原生JS实现的双色球功能示例

    原生JS实现的双色球功能示例

    这篇文章主要介绍了原生JS实现的双色球功能,涉及javascript随机数生成及数值运算相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • 支持移动端原生js轮播图

    支持移动端原生js轮播图

    这篇文章主要介绍了支持移动端原生js轮播图的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 详解JavaScript的闭包、IIFE、apply、函数与对象

    详解JavaScript的闭包、IIFE、apply、函数与对象

    本文主要对JavaScript的闭包、IIFE、apply、函数与对象进行详细介绍。有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论