关于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入门基础_热 ...
随机推荐
- RadioButton改写的开关按钮
先上效果图: 这个控件其实是俩个RadioButton,通过样式就可以实现. 样式资源: <Style x:Key="Tong_Yong_RadioButtonStyle" ...
- jmeter导入jmx文件报错:missing class com.thoughtworks.xstream.converters.ConversionException
有的时候我们会参考别人的jmx文件,但是在导入的时候会报错如下图: 实际上是告诉我们缺少jar包所引起的,下载对应jar包放到jmeter安装目录对应的lib/ext下就可以了,如下图: jmeter ...
- 剑指offer-面试题58_1-翻转单词顺序-字符串
/* 题目: 输入一个英文句子,翻转单词顺序,但单词内部顺序不变. */ /* 思路: 先翻转整个句子,再将每个单词分别翻转一次. */ #include<iostream> #inclu ...
- vuex的state选项rootState.js
说明:本文做为vuex学习详细解(主页目录 配置主页:vuex学习配置详解(目录rootState.js文件如下 作用声明 vuex的state选项常量,并导出默认为state /** * 此文件除声 ...
- linux命令——find
简介:find是Linux系统中的常用命令(应用程序)之一.它是用来在指定目录层次结构(指定目录的子目录以及子目录的子目录)中查找符合指定条件的文件和目录 一:语法结构 find [directory ...
- 阿里巴巴Java开发手册之并发处理注意事项
1. [强制]获取单例对象需要保证线程安全,其中的方法也要保证线程安全.说明:资源驱动类.工具类.单例工厂类都需要注意.2. [强制]创建线程或线程池时请指定有意义的线程名称,方便出错时回溯.正例:p ...
- 让我们纯手写一个js继承吧
继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...
- 【python基础语法】运算符&if条件语句&while循环&for循环(第5天课堂笔记)
""" if语法规则: if 条件比较语句1: # 条件成立的时候 会执行的代码 elif 条件比较语句2: # 条件2成立的时候 会执行的代码 else: # 条件不成 ...
- 我用 Python 集齐了五福
[新智元导读]又到了每年集五福的时间.你的五福集齐了吗?每天在各种群里苦苦求扫福,或者忍受着别人天天求扫福,是不是有点厌倦了.作为技术人员,怎么能忍受得了这种低效的全人工操作呢?今天就为大家推荐用 ...
- IDEA自定义TODO
配置自己的TODO标签 , 避免跟其他人产生错乱 打开TODO页签 , 有三种方式打开 菜单栏打开 View -> Tool Windows -> TODO 快捷键打开 Alt + 6 快 ...