由于现在部分浏览器基于对系统性能的优化,在使用setInterval的时候,在页面没有获得关注的状态,浏览器可以会自动将setInterval终端,等到该页面重新获得关注时再开启。这样就会使得一些基于setInterval的定时效果出现意想不到的问题;

  解决的办法就是使用setTimeout来模拟setInterval的效果。

  具体实现过程如下:

var i = 0;
function time(){ //每隔1秒让++i
console.log(++i);
setTimeout(time,1000);
}
time(); //执行time函数 btn.onclick = function(){
time = null; //重写time函数,从而起到关闭定时器的效果
}

使用setTimeout模拟setInterval效果的更多相关文章

  1. 用setTimeout模拟setInterval的功能

    偶然看到这个题目,稍微写了下,做个笔记,不足之处请指正 //用setTimeout模仿setInterval var MyInterVal = function(fun,tm){ if(this == ...

  2. 为什么要用setTimeout模拟setInterval ?

    setInterval有两个缺点: 使用setInterval时,某些间隔会被跳过: 可能多个定时器会连续执行: 在前一个定时器执行完前,不会向队列插入新的定时器(解决缺点一) 保证定时器间隔(解决缺 ...

  3. setTimeout模拟setInterval调用

    在开发环境下,尽量不用间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动. 尽量使用超时调用来模拟间歇调用. 示例代码: <!DOCTYPE html> <html l ...

  4. setTimeout和setInterval从入门到精通

    我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...

  5. javascript 函数返回值(return)、定时器(setTimeout、setInterval)

    一.函数的返回值:return 1.函数名+括号=return后面的值 <script> function fn1(){ return 100; } alert(fn1()); // 10 ...

  6. setTimeout()与setInterval()——走马灯效果

    JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout ...

  7. settimeout、setinterval区别和相互模拟

    前几天翻书,看到“避免双重求值”一节时有提到settimeout().setinterval() 建议传入函数而不是字符串以作为第一个参数,所以这里总结一下settimeout()和setinterv ...

  8. 前端开发:setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  9. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

随机推荐

  1. Latch2:Latch和性能

    1,数据的IO操作 SQL Server访问的任何一个Page必须存在于内存中,如果不存在于内存中,那么SQL Server发出 Disk IO请求,将数据页从Disk读取到内存中,然后SQL Ser ...

  2. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  3. TypeLoadException: 找不到 Windows 运行时类型“Windows.UI.Xaml.Controls.Binding

    奇怪的问题,我以为是我不小心添加了什么标签导致的,后来发现...坑爹,把项目名字改一下,然后移除掉,接着再加载一下就可以了.......崩溃了,,,,事实证明==>这个时候再把名字改回去也是不报 ...

  4. 模拟image的ajaxPrefilter与ajaxTransport处理

    ////////////////////////////////////////////////////////////////// // options 是请求的选项 // // originalO ...

  5. 用扩展开发一个PHP类

    原文:http://my.oschina.net/mickelfeng/blog/122519?p=1 假设我们要用PHP扩展实 现一个类Person,它有一个private的成员变量$_name和两 ...

  6. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  7. 用bootstrap实现多张图片手动轮回

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAJoCAIAAABHhBX4AAAgAElEQVR4nOzdZXdcV7rg8fmIM2vm3r

  8. Js的语法和循环

    1.蓝球弹起的高度 篮球从10米高的地方落下,每次弹起的高度是原来的0.3倍,问弹跳10次之后篮球的高度. <script type="text/javascript"> ...

  9. 【记录】xUnit for vs2012/vs2013

    关于 NUint 以及单元测试的相关内容,可以参考:[单元测试]NUint使用详解及Visual Studio配置. xUnit 是 NUint 的进化版本,使用方法和 NUint 类似,首先下载安装 ...

  10. iOS UIWebView 拦截点击事件(双击缩放)

    在平时的开发中,要使用到webview,但类似微信的webview在数据没有加载完成的时候 双击屏幕,webview不会缩放,其实实现这个功能很简单 代码是用swift写的 class YYSimpl ...