草庐IT

js定时器

隐藏用户y 2023-07-18 原文

定时器

js中内置的一个方法

作用

每隔一段时间或者延迟一段时间就执行一段指定的代码

定时器的分类

重复执行定时器

setInterval()

作用

每隔一段时间就会重复执行指定的函数 

语法

setInterval(function(){
      代码
},时间)

参数

要执行的函数:时间到了就会执行

时间:间隔的时间

单位:毫秒

1s=1000ms

<style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 50px;
        }
    </style>
    <script>
    window.onload=function(){
        var box=document.getElementById("box");
        var i=0;

        box.onclick=function(){
            setInterval(function(){
                box.innerHTML=i;
                i++;
            },1000);
           
        };
    };
</script>
</head>

<body>
   <div id="box"></div>
</body>
<style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 50px;
        }
    </style>
    <script>
    window.onload=function(){
        var box=document.getElementById("box");
        var i=0;

        box.onclick=function(){
          setInterval(change,1000);
           //函数在外面定义,这里调用需要用函数名,没有括号()
        };
        function change(){
            i++;
            box.innerHTML=i;
        }
    };
</script>
</head>

<body>
   <div id="box"></div>
</body>

延迟执行定时器

setTimeout()

作用:延迟执行定时器执行指定函数,只执行一次

语法

setTimeout(function(){
        代码
},时间);

参数

要执行的函数:当时间到达后会执行这个函数

时间:延迟时间

代码和重复执行定时器很相似

   <style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 50px;
        }
    </style>
    <script>
    window.onload=function(){
        var box=document.getElementById("box");
        var i=0;

        box.onclick=function(){
            setTimeout(function(){
            i++;
            box.innerHTML=i;
            },1000);
           
        };
       
    };
</script>
</head>
<body>
   <div id="box"></div>
</body>

定时器里的this指向

定时器的this指向window的,因为定时器是window身上的一个方法,所以this指向window

<style>
        #box{
            width: 100px;
            height: 100px;
            border:1px solid #f00;
        }
    </style>
    <script>
        window.onload=function(){
            var box=document.getElementById("box");
            var i=0;
            console.log(this);    //window
            box.onclick=function(){
                console.log(this); //box
                var This=this;//把box存给This,函数内部可以调用
                setInterval(function(){
                    console.log(this); //window
                    i++;
                    box.innerHTML=i;
                },1000);
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>

清除定时器

定时器的编号

定时器的一个返回值,返回一个数字,代表当前定时器的编号,我们可根据这个来清除定时器

它返回的编号在不同的浏览器里面是不同的,所以没办法直接拿编号去清除定时器

清除定时器的方法

1.清除重复执行定时器

clearInterval(定时器的返回值)

可以声明一个变量,把定时器的返回值都存到这个变量里,然后拿这个变量去清除定时器

   <style>
        #box{
            width: 100px;
            height: 100px;
            border:1px solid #f00;
        }
    </style>
  
    <script>
        var n=0;
        function add(){
            n++;
            console.log(n);
            //清除定时器的条件一般会放在定时器执行的函数里
            if(n==8){
                //clearInterval(1);
                clearInterval(timer);
            }
        }
        var timer=setInterval(add,1000);
        // console.log(setInterval(add,1000)setInterval(add,1000));//1
        // setInterval(add,1000);
        //定时器在走的过程中,下面代码也会走
        alert(1);
        if(n==8)
    </script>
</head>
<body>
    <div id="box"></div>
</body>

                         1.直接把定时器调用放在一个变量赋值的后面,定时器会走吗?

                                timer使用的时候,定时器已经跑了八次了,页面代码已经跑完了

                         var timer=setInterval(add,1000);

                        2.这个timer是在下面声明的,而使用是在上面,可以用到嘛?

2.清除延迟执行定时器

clearTimeout (定时器的返回值)

有关js定时器的更多相关文章

  1. ruby - Ruby 性能中的计时器 - 2

    我正在寻找一个用ruby​​演示计时器的在线示例,并发现了下面的代码。它按预期工作,但这个简单的程序使用30Mo内存(如Windows任务管理器中所示)和太多CPU有意义吗?非常感谢deftime_blockstart_time=Time.nowThread.new{yield}Time.now-start_timeenddefrepeat_every(seconds)whiletruedotime_spent=time_block{yield}#Tohandle-vesleepinteravalsleep(seconds-time_spent)iftime_spent

  2. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  3. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

  4. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库,其中大部分是用JavaScript(Node.js)编写的,一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread,目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标,所以maketest在每

  5. node.js - 从未编写过任何自动化测试,我应该如何开始行为驱动开发? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。多年来,我一直在使用多种语言进行编程,并且认为自己总体上相当擅长。但是,我从未编写过任何自动化测试:没有单元测试,没有TDD,没有BDD,什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

  6. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移,gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular,它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架,例如grape、slim(是的,我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方,我在Rails4中有

  7. node.js - 如何比较图像并确定哪个内容更多? - 2

    目标:我想从动画GIF中抓取最佳帧并将其用作静态预览图像。我相信最好的帧是显示最多内容的帧-不一定是第一帧或最后一帧。以这张动图为例:--这是第一帧:--这是第28帧:很明显,第28帧很好地代表了整个GIF。我如何以编程方式确定一帧是否比另一帧具有更多像素/内容?如果您能向我指出任何想法、想法、包/模块或文章,我们将不胜感激。 最佳答案 实现此目的的一种直接方法是估计entropy每个图像的帧,并选择具有最大熵的帧。在信息论中,熵可以被认为是图像的“随机性”。单一颜色的图像是非常可预测的,分布越平坦,越随机。这与Arthur-R描述

  8. springboot定时任务 - 2

    如果您希望在Spring中启用定时任务功能,则需要在主类上添加 @EnableScheduling 注解。这样Spring才会扫描 @Scheduled 注解并执行定时任务。在大多数情况下,只需要在主类上添加 @EnableScheduling 注解即可,不需要在Service层或其他类中再次添加。以下是一个示例,演示如何在SpringBoot中启用定时任务功能:@SpringBootApplication@EnableSchedulingpublicclassApplication{publicstaticvoidmain(String[]args){SpringApplication.ru

  9. css - Less.js LoadError - 没有这样的文件要加载 - less 在 main .less 文件上 - 2

    我正在尝试在一个新元素中测试less.js。我100%确定javascript文件加载正常,但我的css文件夹中的less文件一直出现此错误。我打算在启动之前使用less.app编译它,但我宁愿让less.js在开发期间进行编译。由于它是.less或其他文件而不允许浏览器访问该文件是否存在问题?谢谢(运行ubuntu11.04和ruby​​v1.9.2,在firefox和chrome中同样的错误)这是我的head.haml文件,我在其中链接到less.js和app.less(它们都在正确的文件夹中)%link{:rel=>"stylesheet/less",:type=>"text/c

  10. ruby - I18n::InvalidLocaleData:I18n gem 在 js 导出中有问题 - 2

    我正在OSX10.13.4上使用Rails3.2.22.4、Ruby2.2.7开发一个应用程序。有多个翻译文件,例如。en.yml,sq.yml基于国家。从下面的ruby​​mine执行命令时,加载网页时出现错误。rake--tracei18n:js:export来自en.yml的yaml内容已经过验证并且是正确的。从文件中删除后引发错误的特定行将在其他一些.yml文件中给出错误。正在使用当前版本的gemi18n(0.9.5)。Rails服务器启动但加载Web应用程序第一页时因同样的错误而中断。代码遇到i18n翻译代码时抛出错误,当错误从一个文件转移到另一个文件时,yml格式不是问题。

随机推荐