回武汉隔离的第二天打卡,武汉加油,逆战必胜!今天想和大家简单聊一下js定时器的问题。

1.setTimeout 延时器 在指定时间后执行一次,注意只会执行一次

    当然有的时候我们想用延时器做出定时器的效果,让它一直执行也可以,就是反复调用函数自身即可,代码如下: 

      fun();    

      function fun() {
        console.log(1)
        setTimeout("fun()",1000); //自身调用,重复执行
      }

  2.setInterval 定时器 在指定的时间间隔内重复的执行,如不清除,会一直执行下去

      setInterval(function () {

        console.log(1);

      },1000)

  3.值得注意的是在setTimeroutsetInterval的使用中,如果传入参数,那只能传入函数名:

      setInterval(fn,1000)

  4.下面问题来了,当我们在执行定时器的过程当中,会发现一件有趣的事情,那就是定时器会累加,看下面的例子: 

    当我们多次点击浏览器窗口时会发现,打印的速度越来越快,这就是我们所说的定时器累加。    

      var timer;
      document.onclick = function() {
        timer = setInterval(function(){
          console.log(1)
        },1000)
      }

    那么为什么会出现这样的情况呢?咱们举个例子,这就好像一个人每隔一秒钟使用一次打印机,点两下的话就相当于两个人去使用这个打印机,他们是同时进行的,因此每一秒打印会有多于原来两倍的速度。那么如何解决这个问题呢?

    定时器累加问题的解决:先清除定时器,再使用定时器。代码示例如下:

      var timer;
      document.onclick = function() {
        clearInterval(timer)
        timer = setInterval(function(){
          console.log(1)
        },1000)
      }

    

js定时器及定时器叠加问题的更多相关文章

  1. js清除未知定时器的方法

    js清除未知定时器的方法 在需要有实时性更新数据的项目中,我们经常会用到很多定时器,我们可能需要一个可以一次性清除所有定时器的方法,并且不通过指定ID一个一个去清除,以下提供两种解决方案:   1.定 ...

  2. JS中的定时器

    在JS中的定时器分两种: 1,setTimeout() 2,setInterval() setTimeout(): 只在指定时间后执行一次: function hello(){ alert('hell ...

  3. js 中的定时器

    在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...

  4. STM32 HAL库学习系列第4篇 定时器TIM----- 开始定时器与PWM输出配置

    基本流程: 1.配置定时器 2.开启定时器 3.动态改变pwm输出,改变值  HAL_TIM_PWM_Start(&htim4, TIM_CHANNEL_1); 函数总结: __HAL_TIM ...

  5. STM32(5)——通用定时器基本定时器

    1.STM32的Timer简介 STM32中一共有11个定时器,其中2个高级控制定时器,4个普通定时器和2个基本定时器,以及2个看门狗定时器和1个系统嘀嗒定时器. 其中系统嘀嗒定时器是前文中所描述的S ...

  6. JS如何利用定时器实现长按事件

    本篇文章由:http://xinpure.com/js-how-to-use-timer-press-event/ JS 原生事件并没有长按事件,但是我们可以利用一些原有的事件,来实现长按事件 任务需 ...

  7. JS高阶---定时器相关

    首先看几个问题: [主体] (1)定时器真的时定时执行的吗? 顺序验证: 测试结果: 接下来对上述代码做下修改,增加一个长时间工作的消耗,此时再来验证下定时器运行的精准度 结果如下: (2)定时器回调 ...

  8. 前端学习(十四)js回顾和定时器(笔记)

    回顾知识点:    作用域:        1.全局变量:在任何位置都可以使用的变量        2.局部变量:只能在函数内部使用的变量        3.闭包:子函数可以使用父函数的局部变量 -- ...

  9. 解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用

    1.问题描述 在一些需求开发中.需要设定软件提供服务的时间段(营业时间).这时可以选择定时器来实现.可以选择让定时器每隔一段时间检测当前时间是否在服务时间.到达服务时间.进入服务状态.未到服务时间.进 ...

随机推荐

  1. 高性能内存队列Disruptor--原理分析

    1.起源     Disruptor最初由lmax.com开发,2010年在Qcon公开发表,并于2011年开源,其官网定义为:"High Performance Inter-Thread ...

  2. DNA sequence HDU - 1560

    DNA sequence Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  3.  FPGA边沿检测Verilog代码

    FPGA边沿检测Verilog代码(上升沿,下降沿,双边沿) 实现思路:用两个一位寄存器直接异或可以实现 代码实现: ​ module edge_detect( input clk, input rs ...

  4. idea创建django项目

    1.环境.版本 os:windows10 ide:idea python:2.7 django:1.11.25 其他的python.django不确定这么弄会不会有其他问题. 2.python 官网下 ...

  5. Mysql(Mariadb)数据库之Information Schema 库中GLOBAL_VARIABLES表 and SESSION_VARIABLES 表分析

    Information Schema GLOBAL_VARIABLES and SESSION_VARIABLES Tables The Information Schema GLOBAL_VARIA ...

  6. js 任意值变化封装

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 给萌新的 TS custom transformer plugin 教程——TypeScript 自定义转换器插件

    xuld/原创 Custom transformer (自定义转换器)是干什么的 简单说,TypeScript 可以将 TS 源码编译成 JS 代码,自定义转换器插件则可以让你定制生成的代码.比如删掉 ...

  8. [BUG]document.body.scrollTop=0不生效(回到顶部)

    描述 让body回滚到最顶部,设置 document.body.scrollTop = 0; . 微信内,安卓设备可以,ios设备不可以.   原因 MDN中 scrollTop是这样定义的 一个元素 ...

  9. shiro框架总结

    一.概念 shiro是一个安全框架,主要可以帮助我们解决程序开发中认证和授权的问题.基于拦截器做的权限系统,权限控制的粒度有限,为了方便各种各样的常用的权限管理需求的实现,,我们有必要使用比较好的安全 ...

  10. Data-independent acquisition mass spectrometry in metaproteomics of gut microbiota - implementation and computational analysis DIA技术在肠道宏蛋白质组研究中的方法实现和数据分析 (解读人:闫克强)

    文献名:Data-independent acquisition mass spectrometry in metaproteomics of gut microbiota - implementat ...