精华内容
下载资源
问答
  • jscript 5.7 发布修复了不少ie javascript内存泄露的问题。但是leak依然存在。当我们频繁使用 setInterval setTimeout 时就会每几秒钟出现32k leak...
  • 主要介绍了javascript中的两个定时执行函数setInterval和setTimeout的用法,需要的朋友可以参考下
  • 主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码语法介绍,需要的朋友可以参考下
  • 要想知道它们是怎么停止的,首先我们要了解它们的运行机制原理,下面是具体的介绍。
  • setInterval(“show()”,3000);});方法2. 指定定时执行的函数时不要使用引号括号。 代码如下:$(function(){function show(){ alert(“ready”);}setInterval(show,3000);// 注意函数名没有引号括弧! /...
  • Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行。两者的使用方法类似。 最近在练习写一个小例子的时候用到了定时器,发现...
  • 一.setIntervalsetTimeout的区别 setInterval setInterval()方法可按照指定的周期来调用函数或者计算表达式(以毫秒为单位) 语法: setInterval(函数表达式,毫秒数); setInterval()会不停的

    在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概括,正对setTimeout()做一个详细用法总结。

    一.setInterval与setTimeout的区别

    setInterval
    setInterval()方法可按照指定的周期来调用函数或者计算表达式(以毫秒为单位)
    语法:
    setInterval(函数表达式,毫秒数);
    setInterval()会不停的调用函数,直到clearInterval()被调用或者窗口被关闭,由 setInterval()返回的ID值可用作clearInterval()方法的参数。
    setTimeout
    setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式(以毫秒为单位)
    语法:
    setTimeout(函数表达式,毫秒数);
    setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
    区别
      通过以上分析可以看出,setTimeout与setInterval的主要区别是:
      setTimeout()方法只运行一次,也就是说当达到设定的时间后就出发运行指定的代码,运行完后就结束了,如果还想再次执行同样的函数,可以在函数体内再次调用setTimeout(),可以达到循环调用的效果。
      setInterval()是循环执行的,即每达到指定的时间间隔就执行相应的函数或者表达式,是真正的定时器。

    二.setTimeout()的用法

    先写个最简单的demo,如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <script>
    setTimeout("alert('hello')",2000);
    </script>
    </head>
    <body>
    </body>
    </html>
    

    页面会在停留2秒之后弹出对话框,注意setTimeout不会自动重复执行!
    当然,setTimeout也可以执行function,还可以不断重复执行!
    你可以看到h1中的文本数字在一秒一秒地递增!
    更加灵活的是,你还可以指定重复执行的次数,如下:
    if判断中的数字,是用来限制重复执行次数的条件。

    三.clearTimeout()

    要使用clearTimeout(),需要我们设定setTimeout()时, 给予这setTimeout()一个名称, 这名称就是timeoutID ,我们叫停时,就是用这 timeoutID 来叫停

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <script>
    var timeId= setTimeout("alert('hello')",2000);
    clearTimeout(timeId);
    </script>
    </head>
    <body>
    </body>
    </html>
    

    原计划1秒后弹出的警示框,被自然叫停了。

    展开全文
  • 试描述setInterval和setTimeout区别

    千次阅读 2019-04-15 16:33:41
    1.什么是setInterval和setTimeout 在一定时间触发相应的代码,叫做定时器 setTimeout();在指定的时间后,调用相应的方法 window.setsetTimeout(方法,毫秒数) setInterval();在指定的周期内,不停的调用方法,直到...

    1.什么是setInterval和setTimeout
    在一定时间触发相应的代码,叫做定时器
    setTimeout();在指定的时间后,调用相应的方法
    window.setsetTimeout(方法,毫秒数)
    setInterval();在指定的周期内,不停的调用方法,直到遇到clearInterval
    window.setInterval(方法,毫秒数)
    注意:在调用定时器的时候,window可以省略。方法都是匿名函数
    setInterval(方法,毫秒数)返回值 number类型
    1.方法这里可以直接写入方法体
    2.方法内是调用其他方法****
    clearInterval(定时器名称)结束定时器
    setTimeout(方法,毫秒数)超时调用,只调用一次
    clearTimeout()清除setTimeout定时器
    2.什么时候用的
    setInterval 反复不断的在间隔时间内容调用 图片轮播 图片切换
    在载入后,每隔指定的时间就执行一次表达式
    setTimeout 定时调用,只弹出一次,窗口弹出广告
    在载入后,延迟执行一次表达式
    3.区别
    setInterval 反复调用
    setTimeout只调用一次
    清除的方法不同

    getElementById(“idNme”);获取一个元素
    getElementByTagName(“标记名称”);根据标记名称获取元素 返回一个集合
    集合元素 可以当做数组处理
    用for…in 可以循环遍历 用for…都可以

    展开全文
  • 使用定时器的setInterval()方法会出现程序并不是按照我们设定的精确时间而调用的问题! 定时器: 在JavaScript中经常会使用定时器来进行延时或者是重复调用的操作;定时器有两个方法: 1:setInterval(参数1...

    先把问题摆出来:
    使用定时器的setInterval()方法会出现程序并不是按照我们设定的精确时间而调用的问题!


    定时器:

    在JavaScript中经常会使用定时器来进行延时或者是重复调用的操作;定时器有两个方法:
    1:setInterval(参数1,参数2)
    参数1:要执行的代码,可以为function();
    参数2:间隔时间 单位ms;
    执行无限次直到取消定时器。

    2:setTimeout(参数1,参数2)
    参数1:要执行的代码,可以为function();
    参数2:延迟时间 单位ms;
    执行一次。

    注意区分:setInterval()的参数2是间隔时间,setTimeout()的参数2是延迟时间
    这一段将是接下来进行二者详细区分的重要根据;


    一:setInterval() 辉煌下隐藏的破败##

    实例1

     var num = 0;
        var test1 =  setInterval(function (){
            num++;
            var data = new Date();
            var str = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds() + ":" + data.getMilliseconds();
            console.log(str);
            if (num > 5) {
                clearInterval(test1);
            }
        },1000);
    

    这里写图片描述
    1:代码;程序设置定时器每1秒执行一次,当执行次数为六次时消掉计数器;
    2:从运行结果上来看,在精确到毫秒之后就有些许的波动;
    实例2

     var num2 = 0;
        var test2 = setInterval(function(){
            num2++;
            for(var i = 0;i < 500000;i++){
                var div = document.createElement("div");
                var container = document.getElementById("d1");
                container.appendChild(div);
            }
            var data = new Date();
            var str = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds() + ":" + data.getMilliseconds();
            console.log(str);
            if(num2 > 5){
                clearInterval(test2);
            }
        },1000);
    
    

    这里写图片描述
    1:代码描述:定时器中有一个50万次的循环,创建和追加div元素这个操作是非常耗费性能的,运行一次我这破机子瞬间不好了;执行完一次for循环之后就输出一次当前的时间,运行六次就消除定时器。
    2:执行结果:如图所示每一次执行定时器的操作的时间相差分别是7,9,9,12,13秒,
    哎!!定义的不是每一秒执行一次吗?为什么出现相差 这么多秒!!!!???
    此时请出在开头亮出来的问题:
    setInterval()方法会出现程序并不是按照我们设定的精确时间而调用的问题!!!
    这是为什么?我设置了程序调用时间为什么又不按照我说的办了??

    简单地画了个图,描述一下程序的执行时间为什么会产生错乱。
    图一:
    这里写图片描述
    这张图描述的是当A <= B时的调用状况。此时程序每一次的执行根本就不会影响到定时器设置的间隔调用;所以此时会产生实例1中输出的时间是严格按照我们所设定的精确时间进行调用;

    图二:
    这里写图片描述
    曾经我以为使用定时器的函数,只要到达了设置的间隔时间,即使他没有执行完也会被定时器强行的从栈中扯出来从头开始执行,这样从头到尾就没有一次是完整的执行出来的;这TM怎么可能!!!!实例2就已经实力打脸了!

    真正的执行是这样的---------图三:
    这里写图片描述
    你看,这每一个圆圈代表每一次的程序执行时间A,底下那各自连接不上的憋屈红线就是定时器设置的间隔时间B,和图二是截然不同的,只有在函数每一次执行完之后才会调用定时器,继续重新进行调用;卧槽?这是为啥?这才是导致开头问题的原因!!!
    所以我把这一节称之为辉煌下的破败

    重点原理:

    JavaScript是运行在单线程的环境中的,所以这就意味着定时器就成了要执行的计划!而不是必须要执行的铁律! 为啥呢? 当函数开始执行时在栈中创建出来一个栈帧,这个栈帧的执行是需要时间的,假设有3秒,在这三秒内,JavaScript的单线程特点就会确保在这3秒内全力的专一的去解决掉这个栈帧(函数)。所以在这个函数运行的时候定时器是没有能力终止他的运行的,因此当函数的运行时间大于间隔时间时,间隔时间1秒到了,但是程序还有2秒没有执行完,那你也给我老老实实的等着函数执行完!!!!


    二:setTimeout() 平凡的力量##

    奇坑无比的setInterval()有着看似无法解决的弊端;
    据说有一种解决思路就是将间隔时间设置的大点,远大于函数执行的时间。。。定时器说了,老子管不了你还不能装看不见吗? 眼不见心不烦。。。
    乍一看,确实有道理,但是这也不大合适,就像前面实例2中,每一次执行同一个函数的执行时间都是有些区别的。你该怎么去设置这个间隔时间呢?设置的大点?从实际上出发是不合适,因此果断抛弃。

    在setTimeout()中,他的参数2代表的是延迟时间,他是先延迟后执行,setInterval()是先执行,后使用时间间隔;无限次执行;

    原理图:
    这里写图片描述
    如图先有一段延迟时间,之后再执行函数方法;可以看到参数2 的延迟时间对函数的执行是毫无影响的;此时如果把setTimeout放到循环体中,那么是不是代表这就是一个秩序井然的程序。既可以达到setInterval的循环执行的效果,又解决了setInterval的时间不精确的问题;

     var i=0;
        function show() {
            console.log(i);
            i++;
            if(i<5){
                setTimeout(show,1000);
            }
        }
        show();
    

    这是一段骚气的代码,如此造成循环每隔1秒就输出i;


    总结
    1:setInterval的参数2是间隔时间;
    2:setTimeout的参数2是延迟时间;
    3:setInterval受单线程影响出现时间不精确现象;
    4:使用循环+setTimeout可以完成循环执行,并且弥补了setInterval的不足;

    展开全文
  • 说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典型用法如下: function do_sth() { console.log('Hello...'); ...
  • 实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以**毫秒**为单位的时间间隔,当过了那个时间段之后就将执行那段代码。 不过这两个函数还是有区别的,...

    这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

    1. 方法使用说明

    实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以**毫秒**为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

    不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会**自动重复**执行代码,而setTimeout**只执行一次**那段代码。

    虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:

    <script type="text/javascript">
        showTime();
        function showTime() {
            var today = new Date();
            console.log("The time is: " + today.toString());
            setTimeout("showTime()", 5000);
        }
    </script>

    一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

    <script type="text/javascript">
        setInterval("showTime()", 5000);
        function showTime() {
            var today = new Date();
            console.log("The time is: " + today.toString());
        }
    </script>

    这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的**最大区别**就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。
    如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

     2. 方法停止说明

    如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

    当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.11.1.js"></script>
    </head>
    <body>
    <input id="stopGoalLink" type="button" value="停止"/>
    </body>
    <!--create file: settimeout_setinterval2.js-->
    <script type="text/javascript">
        var intervalProcess = setInterval("showTime()", 2000);
    
        function showTime() {
            var today = new Date();
            console.log("The time is: " + today.toString());
        }
    
        $("#stopGoalLink").click(function () {
            clearInterval(intervalProcess);
        });
    </script>
    </html>

    只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.11.1.js"></script>
    </head>
    <body>
    <input id="stopGoalLink" type="button" value="停止"/>
    </body>
    <!--create file: settimeout_setinterval2.js-->
    <script type="text/javascript">
        var timeoutProcess;
        showTime();
    
        function showTime() {
            var today = new Date();
            console.log("The time is: " + today.toString());
            timeoutProcess = setTimeout("showTime()", 2000);
        }
    
        $("#stopGoalLink").click(function () {
            clearTimeout(timeoutProcess);
        });
    </script>
    </html>

     

    展开全文
  • 使用计时器挂钩 自定义挂钩可根据超时或所经过的时间间隔来调度功能的执行。 安装 npm install use-timers-hooks 用法 import { useState } from "react" ; import { useInterval , useTimeout } from "use-timers-...
  • 此模块允许Python用户在其代码中使用setTimeout()和setInterval() 。 我尚未实现setImmediate()因为重新创建功能的唯一方法是使clearImmediate()函数终止正在运行的线程。 杀死正在运行的线程本质上是不安全的,...
  • js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 循环执行(setInterval) 循环执行就是设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉 用法是...
  • setInterval和setTimeout的性能问题

    千次阅读 2018-07-15 07:38:55
    使用 setInterval 可能造成很多性能问题。 原因之一:setInterval无视代码错误 setInterval有个讨厌的习惯,即对自己调用的代码是否报错这件事漠不关心。 换句话说,如果setInterval执行的代码由于某种原因出了错...
  • JS中setInterval和setTimeout的区别

    千次阅读 2017-05-12 11:35:55
    萌新首发~~记录自己的学习心得,希望高手指出不足的地方 首先免不了先看两者的基本定义与用法:  1.setInterval的基本语法: ...(若是函数,则只需要写函数名,可以不加双引号括号) mil
  • setInterval和setTimeout

    2020-07-17 15:41:21
    setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数 clearInterval():取消由 setInterval() 设置的 timeout <html>...
  • 前端定时器 setInterval setTimeout setInterval 循环执行 循环执行就是设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉。 用法是setInterval(“方法名或方法”,“延时”), 第一...
  • 说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典型用法如下: ? 1 function do_sth() { con...
  • 一个是循环执行setInterval,另一个是定时执行setTimeout 1:setInterval 循环执行, 每隔一段时间执行一次, 多次执行。 2:setTimeout 到时间后执行, 只执行一次。 一、循环执行(setInterval) 顾名思义...
  • setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。  方 法 实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是...
  • setInterval()间隔指定...setTimeout()指间隔多少毫秒执行制定代码,只执行一次,用clearTimeout()停止 例子:setInterval() <!DOCTYPE html> <html lang="en"> <head> <meta charse...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,881
精华内容 25,152
关键字:

setinterval和settimeout