关于setTimeout的妙用
定义
在指定的延迟时间之后调用一个函数或执行一个代码片段
这个是setTimeout最主要的功能,但也是很坑的地方,首先javascript其实是运行在单线程的环境下,意味者定时器会在未来的某个时间支持,但是具体的执行的时间并不能够很准确的运行,容易受到其它时间的影响,比如DOM的计算、事件的执行、各种函数的执行和运算。但是我们可以利用延迟执行的一些特性来达到我们想要的功能。、
window.setTimeout(callbask, delay, [param1, param2, ...])
函数节流
程序运行过程中对某个函数调用次数很多导致界面不断回流或者重排,这时候就需要对这个函数进行节流,比如监听touchmove、scroll事件等,可以限定函数在单位时间内只执行一次
var throttle = function(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
控制执行
点击事件是会产生冒泡,执行的顺序是当前点击元素->父元素->...->document,一直往上执行到document。如果对当前元素的点击事件处理加上setTimeout的话,那么执行顺序就会改变为父元素->...->document->当前元素。这样就可以控制冒泡事件的执行顺序
var parent = document.getElementById("parent");
var child = document.getElementById("child"); document.body.addEventListener("click", function(e) {
console.log("body"); }, false); parent.addEventListener("click", function(e) {
console.log("parent");
}, false); child.addEventListener("click", function(e) {
setTimeout(function() {
console.log("child"); }, 0);
}, false); /*
*parent
*body
*child
*/
构建一个轮询任务
javacsript中已经有一个开启轮询的方法,就是setInterval,但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间
比如有个轮询任务间隔是100ms,但是执行方法的时间需要450ms,那么在200ms、300ms、400ms本来是计划中执行任务的时间,浏览器发现第一个还未执行完,那么就会放弃2、3、4次的任务执行,并且在500ms之后再次执行任务,这样的话,其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔
setTimeout(function(){
alert(1);
setTimeout(arguments.callee, 100);
},100)
分块处理耗时计算
浏览器给javascript的运行规定了内存和时间,假如javascript运行的时间超过了规定时间,那么浏览器就会''报错''
for(var i = 0; i < arr.length; i++){
//耗时很久的嵌套循环或者运算
doSomeing(arr[i]);
}
假如在循环中做的处理的逻辑不是同步的话,那么可以把逻辑''分片''执行
sertTimeout(function(){
var item = arr.shift();
dosomeing(item);
if(arr.length <0 ){
setTimeout(arguments.callee, 100);
}
}, 100);
延迟JS引擎的调用
GUI渲染线程和JS引擎的执行之间是互斥,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎执行完毕时立即被执行。这样的结果会导致新内容很晚才能渲染完成,很多时候我们需要让界面先渲染完成之后在去调用JS引擎来执行,那么可以使用setTimeout来延迟JS引擎的调用
var div = document.createElement('div');
div.setAttribute('style', 'background-color:#233; width:100px; height:100px');
document.body.appendChild(div); setTimeout(function() {
alert(1);
}, 100);
关于setTimeout的妙用的更多相关文章
- setTimeout的妙用2——防止循环超时
上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用- ...
- 关于setTimeout的妙用前端函数节流
最近在某团队忙于一个项目,有这么一个页面,采用传统模式开发(吐槽它为什么不用React),它的DOM操作比较多,然后性能是比较差的,尤其当你缩放窗口时,可怕的事情发生了,出现了卡顿,甚至浏览器瘫痪.为 ...
- 解析setTimeout时间设置为0
1.开胃菜,setTimeout为何物 首先看一下w3school上面对于setTimeout的解释 setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式. 很 ...
- JS异步执行之setTimeout 0的妙用
最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的 ...
- Promise的前世今生和妙用技巧
浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...
- javascript 函数返回值(return)、定时器(setTimeout、setInterval)
一.函数的返回值:return 1.函数名+括号=return后面的值 <script> function fn1(){ return 100; } alert(fn1()); // 10 ...
- 关于定时器setTimeout()方法的实践--巧解bug
_使用开发环境:UAP:_ _框架:JQuery.MX:_ 最近的开发的页面中,有一处需要在提交的 datagrid里启用行编辑,就会发生奇怪的bug,编辑过程中如图所示不移开焦点直接点保存,那么已输 ...
- ES7前端异步玩法:async/await理解 js原生API妙用(一)
ES7前端异步玩法:async/await理解 在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
随机推荐
- Java基础之五、Java编程思想(1-7)
一.对象导论 1:多态的可互换对象 面向对象程序设计语言使用了后期绑定的概念. 当向对象发送消息时,被调用的代码直到运行时才能确定.也叫动态绑定. 2:单根继承结构 所有的类最终都继承自单一的基类,这 ...
- MRAM技术进入汽车应用
在整个地址空间范围内读写各种类型的数据.通常MRAM的操作和时序类似于32位微控制器的规范和时序.与DLFASH相比,当今的非易失性存储器可以接受MRAM设备的性能和吞吐量. 与当今的DFLASH相比 ...
- php ip转换省市县
http://www.cz88.net/ip/ http://www.ttlsa.com/php/php_cunzhen-ipdata/ # wget h http://6.scdx3.crsky.c ...
- PHP0021:PHP COOKIE 设置修改删除
- MySQL架构和MySQL索引
1. MySQL架构 1.1 逻辑架构图 1.1.1 Connection Pool: 连接池 * 管理缓冲用户连接,线程处理等需要缓存的需求. * 负责监听对 MySQL Se ...
- discuz!ml-3.x版本getshell
影响范围: discuz! ml v3.x全版本. 产生原因 漏洞原因:Discuz!ML 系统对cookie中的l接收的language参数内容未过滤,导致字符串拼接,从而执行php代码. 利用ex ...
- C++中复制构造函数被调用的三种情况
C++中的构造函数 c++中的构造函数分为构造函数,和复制构造函数,相比于构造函数,复制构造函数使用更加方便,快捷.构造函数可以有多个,二复制构造函数只能有一个,因为复制构造函数的参数只能是当前类的一 ...
- 44.Python实现简易的图书管理系统
首先展示一下图书管理系统的首页: 这是图书管理系统的发布图书页面: 最后是图书管理系统的图书详情页已经图书进行删除的管理页. 该图书管理系统为练习阶段所做,能够实现图书详情的查询.图书的添加.图书的删 ...
- CSS实现同一行中图片和文本垂直居中
1.为图片和文本都设置vertical-align:middle
- C、C++和C#区别概述
译者前言 今天突然好奇C.C++和C#这三门语言都有个C,那么它们之间到底有什么关联呢.所以就去Google了,找到了这篇文章:Understanding the Differences Betwee ...