JS中定时器的返回数值ID值
定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除。
setInterval()/setTimeout()BOM中的Window对象方法,以返回数字值id来清除定时器的排序位置存在一定的兼容性问题。通常采用一个变量接受定时器产生的返回值id,通过变量来这种方式来实现关闭定时器操作的兼容性。
chorme浏览器测试:
var i = 0;
var timer = setInterval(function () {
console.log(i + 'i');
i++;
}, 1000)
console.log(timer);//=>1,firefox浏览器可能显示为2,这是BOM中的兼容性问题
console.log(typeof timer);//=>'number'
直接采用定时器返回的数值ID关闭定时器的代码:(chrome[版本 73.0.3683.103(正式版本)(64 位)]测试有效)
var j=0;
var a = setInterval(function () {
console.log(j + 'j');
j++;
}, 1000);
clearInterval(1);
一般避免BOM中定时器返回数值ID直接使用,以免产生兼容性问题。避免这种兼容性使用定时器的案例:
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>cnblog头部轮播图</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
</style>
<script> </script>
</head>
<body>
<input type='button' value='点击开启定时器' id='btn' />
<input type='button' value='点击关闭定时器' id='btn-close' />
<p id='content'></p>
<script>
var i = 0;
var oBtn = document.getElementById('btn');
var oBtnC = document.getElementById('btn-close');
var oP = document.getElementById('content');
var timer = null;
oBtn.onclick = function () {
if(timer){
clearInterval(timer);
}
timer=setInterval(function () {
oP.innerHTML += i + '<br/>';
i++;
}, 1000);
}
oBtnC.onclick = function (){
clearInterval(timer); }
</script>
</body> </html>
测试时,以下版本浏览器的定时器返回数值ID以1为起始,一次后排。
Chrome[版本 73.0.3683.103(正式版本)(64 位)]
UC[版本6.2.4098.3]
Edge[Microsoft Edge 44.17763.1.0]测试。
但是兼容性问题浏览器:
fireFox[版本67.0.3 (32 位)]要在原定时器的序位的基础上加1。
JS中定时器的返回数值ID值的更多相关文章
- 关于js中定时器的返回值问题
在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...
- js中定时器相关
每三秒(3000 毫秒)弹出 "Hello" : setInterval(function(){ alert("Hello"); }, 3000); setIn ...
- JS中给函数参数添加默认值(多看课程)
JS中给函数参数添加默认值(多看课程) 一.总结 一句话总结:咋函数里面是可以很方便的获取调用函数的参数的,做个判断就好,应该有简便方法,看课程. 二.JS中给函数参数添加默认值 最近在Codewar ...
- SpringMVC中通过@ResponseBody返回对象,Js中调用@ResponseBody返回值,统计剩余评论字数的js,@RequestParam默认值,@PathVariable的用法
1.SpringMVC中通过@ResponseBody.@RequestParam默认值,@PathVariable的用法 package com.kuman.cartoon.controller.f ...
- js中多个数字运算后值不对(失真)处理方法
最近遇到一个bug ,在js里面计算两个数字相减,633011.20-31296.30 得到的结果居然是601714.89,领导不乐意了说怎么少了0.01,我一听,噶卵达,来达鬼,不可能啊,我Goog ...
- JS中给函数参数添加默认值
最近在Codewars上面看到一道很好的题目,要求用JS写一个函数defaultArguments,用来给指定的函数的某些参数添加默认值.举例来说就是: // foo函数有一个参数,名为x var f ...
- js中的referrer返回上一页使用介绍
js中的referrer的用法举例. js完整代码: <script language="javascript"> var refer=document.refer ...
- js中定时器
周期性定时器:周期性的执行某段代码 window.setInterval() window.clearInterval() 示例: document.it = setInterval(fun ...
- js中定时器调用函数时为什么会有引号
之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...
随机推荐
- noip模拟赛 写代码
分析:这其实就是括号匹配题,一眼贪心题,不过一开始贪错了,以为([)]是合法的......其实括号之间不能嵌套. 一开始的想法是尽量往左边填左括号,因为每种括号的数量都确定了,那么左括号和右括号的数量 ...
- 前端开发:CSS3
CSS介绍: CSS能够使页面具有美观一致的效果,并且能够让内容与格式分离,利于扩展 所以,CSS解决了下面两个问题: 1. 将HTML页面的内容与格式分离: 2. 提高web开发的工作效率. CSS ...
- Spring Data Jpa系列教程--------实体解析和关联关系
Spring Data Jpa是基于HIbernate开发的,所以建立实体建的实体和映射关系需要好好好的去了解一下,本文有以下内容,实体管理器介绍,实体与数据库表的映射介绍,关联关系(一对多,多对多) ...
- 姓名与ID(codevs 1027 未结题)
题目描述 Description 有N个人,各自有一个姓名和ID(别名).每个人的姓名和ID都没有重复.这些人依次进入一间房间,然后可能会离开.过程中可以得到一些信息,告知在房间里的某个人的ID.你的 ...
- CLR GC
一.垃圾回收算法 每个应用程序都包含一组根(root),每个根都是一个存储位置,他要么为null,要么指向托管堆的一个对象,类型中定义的静态字段.局部变量.方法参数等都会被认为是根. 垃圾回收器(GC ...
- Mybatis 最强大的动态sql <where>标签
<select id="findActiveBlogLike" resultType="Blog"> SELECT * FROM BLOG WHER ...
- 上下文( Contexts )
在 Indy9 的服务器中,链接特定(connection specific)的数据被作为线程类的一部分被存储. 实现这个要不然通过使用 thread.data 属性要不然通过继承对应的 thread ...
- CentOS 7 防火墙开启了哪些服务和端口?
过滤封包功能的 netfilter 已经内建在 CentOS 7 的内核,但是配置 netfilter 的界面程式 firewalld 却未必有安装,不论是否已经安装,都可以执行下面的安装指令: yu ...
- Maven具体解释之仓库------本地仓库、远程仓库
在Maven中,不论什么一个依赖.插件或者项目构建的输出.都能够称之为构件. Maven在某个统一的位置存储全部项目的共享的构件.这个统一的位置.我们就称之为仓库.(仓库就是存放依赖和插件的地方) 不 ...
- PCCs系数
package ai; public class pccs { public static void main(String[] args) { double same[][]=new double[ ...