js定时器及定时器叠加问题
回武汉隔离的第二天打卡,武汉加油,逆战必胜!今天想和大家简单聊一下js定时器的问题。
1.setTimeout 延时器 在指定时间后执行一次,注意只会执行一次
当然有的时候我们想用延时器做出定时器的效果,让它一直执行也可以,就是反复调用函数自身即可,代码如下:
fun();
function fun() {
console.log(1)
setTimeout("fun()",1000); //自身调用,重复执行
}
2.setInterval 定时器 在指定的时间间隔内重复的执行,如不清除,会一直执行下去
setInterval(function () {
console.log(1);
},1000)
3.值得注意的是在setTimerout和setInterval的使用中,如果传入参数,那只能传入函数名:
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定时器及定时器叠加问题的更多相关文章
- js清除未知定时器的方法
js清除未知定时器的方法 在需要有实时性更新数据的项目中,我们经常会用到很多定时器,我们可能需要一个可以一次性清除所有定时器的方法,并且不通过指定ID一个一个去清除,以下提供两种解决方案: 1.定 ...
- JS中的定时器
在JS中的定时器分两种: 1,setTimeout() 2,setInterval() setTimeout(): 只在指定时间后执行一次: function hello(){ alert('hell ...
- js 中的定时器
在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...
- STM32 HAL库学习系列第4篇 定时器TIM----- 开始定时器与PWM输出配置
基本流程: 1.配置定时器 2.开启定时器 3.动态改变pwm输出,改变值 HAL_TIM_PWM_Start(&htim4, TIM_CHANNEL_1); 函数总结: __HAL_TIM ...
- STM32(5)——通用定时器基本定时器
1.STM32的Timer简介 STM32中一共有11个定时器,其中2个高级控制定时器,4个普通定时器和2个基本定时器,以及2个看门狗定时器和1个系统嘀嗒定时器. 其中系统嘀嗒定时器是前文中所描述的S ...
- JS如何利用定时器实现长按事件
本篇文章由:http://xinpure.com/js-how-to-use-timer-press-event/ JS 原生事件并没有长按事件,但是我们可以利用一些原有的事件,来实现长按事件 任务需 ...
- JS高阶---定时器相关
首先看几个问题: [主体] (1)定时器真的时定时执行的吗? 顺序验证: 测试结果: 接下来对上述代码做下修改,增加一个长时间工作的消耗,此时再来验证下定时器运行的精准度 结果如下: (2)定时器回调 ...
- 前端学习(十四)js回顾和定时器(笔记)
回顾知识点: 作用域: 1.全局变量:在任何位置都可以使用的变量 2.局部变量:只能在函数内部使用的变量 3.闭包:子函数可以使用父函数的局部变量 -- ...
- 解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
1.问题描述 在一些需求开发中.需要设定软件提供服务的时间段(营业时间).这时可以选择定时器来实现.可以选择让定时器每隔一段时间检测当前时间是否在服务时间.到达服务时间.进入服务状态.未到服务时间.进 ...
随机推荐
- 高性能内存队列Disruptor--原理分析
1.起源 Disruptor最初由lmax.com开发,2010年在Qcon公开发表,并于2011年开源,其官网定义为:"High Performance Inter-Thread ...
- DNA sequence HDU - 1560
DNA sequence Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- FPGA边沿检测Verilog代码
FPGA边沿检测Verilog代码(上升沿,下降沿,双边沿) 实现思路:用两个一位寄存器直接异或可以实现 代码实现: module edge_detect( input clk, input rs ...
- idea创建django项目
1.环境.版本 os:windows10 ide:idea python:2.7 django:1.11.25 其他的python.django不确定这么弄会不会有其他问题. 2.python 官网下 ...
- Mysql(Mariadb)数据库之Information Schema 库中GLOBAL_VARIABLES表 and SESSION_VARIABLES 表分析
Information Schema GLOBAL_VARIABLES and SESSION_VARIABLES Tables The Information Schema GLOBAL_VARIA ...
- js 任意值变化封装
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 给萌新的 TS custom transformer plugin 教程——TypeScript 自定义转换器插件
xuld/原创 Custom transformer (自定义转换器)是干什么的 简单说,TypeScript 可以将 TS 源码编译成 JS 代码,自定义转换器插件则可以让你定制生成的代码.比如删掉 ...
- [BUG]document.body.scrollTop=0不生效(回到顶部)
描述 让body回滚到最顶部,设置 document.body.scrollTop = 0; . 微信内,安卓设备可以,ios设备不可以. 原因 MDN中 scrollTop是这样定义的 一个元素 ...
- shiro框架总结
一.概念 shiro是一个安全框架,主要可以帮助我们解决程序开发中认证和授权的问题.基于拦截器做的权限系统,权限控制的粒度有限,为了方便各种各样的常用的权限管理需求的实现,,我们有必要使用比较好的安全 ...
- 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 ...