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.问题描述 在一些需求开发中.需要设定软件提供服务的时间段(营业时间).这时可以选择定时器来实现.可以选择让定时器每隔一段时间检测当前时间是否在服务时间.到达服务时间.进入服务状态.未到服务时间.进 ...
随机推荐
- Yuchuan_linux_C 编程之八 文件操作相关函数
一.整体大纲 st_mode整体介绍: st_mode详细介绍: 二. Linux文件操作相关函数 1. stat 作用:获得文件信息,也可以获取文件大小. 头文件 #include <sys/ ...
- java 几种锁实现
public class SyncronizedTest { private int value = 1; private AtomicInteger value1 = new AtomicInteg ...
- java线程间的共享
本次内容主要讲synchronized.volatile和ThreadLocal. 1.synchronized内置锁 线程开始运行,拥有自己的栈空间,就如同一个脚本一样,按照既定的代码一步一步地执行 ...
- 检测js对象是不是数组类型?
面试时候被人问如何检测一个未知变量是不是数组类型,丢脸啊,老祖宗的脸都丢没了,这都不会,回家啃书本去吧!!! var a = [];方法一:Array.isArray([]) //true type ...
- for循环结合range使用方法
range概念:表示一个数据范围 基本的语法格式:range(开始数据,结束数据(不包括结束数据),步长) 记住一个公式:下一个数据=开始数据+步长 步长:表示的是数据前后的间隔 OK,基本的概念和语 ...
- 什么是SSH与SSH客户端
1.什么是SSH? SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SS ...
- Flask HTTP请求与响应
设置请求 POST GET 设置post和get,在route中设置methods参数,除了post,get,还有put ,delete 等 @app.route('/http_test', meth ...
- oracle12c数据库第一周小测验
一.单选题(共4题,30.4分) 1 ( )是位于用户与操作系统之间的一层数据管理软件.数据库在建立.使用和维护时由其统一管理.统一控制. A. A.DBMS B. B.DB C. C.DBS ...
- javaScript 基础知识汇总 (十二)
1.属性的标志和描述符 属性的标志 对象属性除value外还有三个特殊属性,即标志 writable ----如果为true,则可以修改,否则它只是只读的. enumerable ----如果为tru ...
- MySQL设置外键报错 #1452 - Cannot add or update a child row: a foreign key constraint fails 解决方法
MySQL数据库,当我尝试在A表中设置B表的主键为外键时,报出错误:#1452 - Cannot add or update a child row: a foreign key constraint ...