定时器会返回一个数字值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值的更多相关文章

  1. 关于js中定时器的返回值问题

    在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...

  2. js中定时器相关

    每三秒(3000 毫秒)弹出 "Hello" : setInterval(function(){ alert("Hello"); }, 3000); setIn ...

  3. JS中给函数参数添加默认值(多看课程)

    JS中给函数参数添加默认值(多看课程) 一.总结 一句话总结:咋函数里面是可以很方便的获取调用函数的参数的,做个判断就好,应该有简便方法,看课程. 二.JS中给函数参数添加默认值 最近在Codewar ...

  4. SpringMVC中通过@ResponseBody返回对象,Js中调用@ResponseBody返回值,统计剩余评论字数的js,@RequestParam默认值,@PathVariable的用法

    1.SpringMVC中通过@ResponseBody.@RequestParam默认值,@PathVariable的用法 package com.kuman.cartoon.controller.f ...

  5. js中多个数字运算后值不对(失真)处理方法

    最近遇到一个bug ,在js里面计算两个数字相减,633011.20-31296.30 得到的结果居然是601714.89,领导不乐意了说怎么少了0.01,我一听,噶卵达,来达鬼,不可能啊,我Goog ...

  6. JS中给函数参数添加默认值

    最近在Codewars上面看到一道很好的题目,要求用JS写一个函数defaultArguments,用来给指定的函数的某些参数添加默认值.举例来说就是: // foo函数有一个参数,名为x var f ...

  7. js中的referrer返回上一页使用介绍

    js中的referrer的用法举例. js完整代码:  <script language="javascript">  var refer=document.refer ...

  8. js中定时器

    周期性定时器:周期性的执行某段代码 window.setInterval()      window.clearInterval() 示例: document.it = setInterval(fun ...

  9. js中定时器调用函数时为什么会有引号

    之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...

随机推荐

  1. BNUOJ 7178 病毒侵袭持续中

    病毒侵袭持续中 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 30 ...

  2. [HDU2136] Largest prime factor(素数筛)

    传送门 题意 给出若干个数n(n<=1000000),求每个n的最大质因子的排名. 质数的排名:如果素数p是第k小的素数,那么p的排名就是k. 思路 乍一看不知道怎么搞. 其实可以想想我们怎么筛 ...

  3. 【SGU194&ZOJ2314】Reactor Cooling(有上下界的网络流)

    题意: 给n个点,及m根pipe,每根pipe用来流躺液体的,单向的,每时每刻每根pipe流进来的物质要等于流出去的物质,要使得m条pipe组成一个循环体,里面流躺物质. 并且满足每根pipe一定的流 ...

  4. 【BZOJ4403】序列统计(Lucas定理,组合计数)

    题意:给定三个正整数N.L和R, 统计长度在1到N之间,元素大小都在L到R之间的单调不降序列的数量. 输出答案对10^6+3取模的结果. 对于100%的数据,1≤N,L,R≤10^9,1≤T≤100, ...

  5. 【BZOJ4710】分特产(容斥原理,组合计数)

    题意:有m种特产,第i种有a[i]个 有n个同学分特产,要求: 1.恰好分完 2.每个人至少要分到一个 求方案数模10^9+7 n,m,a[i]<=1000 思路:WYZ作业 首先考虑对于每一种 ...

  6. Java利用jacob实现文档格式转换

    实现文档格式之间的转换,我使用的是jacob-1.7版本,需要jacob.jar来调用activex控件,本机需安装WPS/office,还需要jacob.jar以及jacob.dll 其中:    ...

  7. Codeforces Round #247 (Div. 2) B

    B. Shower Line time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. Kinect驱动的人脸实时动画

    近期几年.realtime的人脸动画開始风声水起.不少图形图像的研究者開始在这个领域不断的在顶级会议siggraph和期刊tog上面发文章. 随着kinect等便宜的三维数据採集设备的运用.以及其功能 ...

  9. Linux下的文件夹创建命令使用实践

    [文章摘要] 本文以实际的C源程序为样例,介绍了Linux下的文件夹创建命令(mkdir)的用法.为相关开发工作的开展提供了故意的參考. [关键词] C语言  Linux  文件夹创建  makefi ...

  10. 第二天,初步slide第一版和家的照片墙

    今天基本完成任务, 1. 写了昨天的总结, 2. 完成slides的第一个完整版. 3. 家里布置了照片墙. 4. 其他的 未完成: 1. 框架搭建:Creasy没来. 领导力:为公司利益早起,任务说 ...