当前位置:首页 > 日记 > 正文

setTimeout学习小结

setTimeout学习小结

大致介绍

今天看了一篇文章,觉得写得不错,所以学习了一下,这篇博客是我自己的理解和总结

原文:你应该知道的 setTimeout 秘密

主要内容:

 1、setTimeout原理

 2、setTimeout(function(){..},0)的意义

 3、setTimeout的this指向和参数问题

setTimeout原理

先来看一段代码:

var start = new Date(); setTimeout(function(){  console.log(new Date() - start); },500); while(new Date() - start <= 1000 ){}

最后输出的是1003(可能数字不同,但是都大于1000)

之所以会输出这样的数,是因为执行到setTimeout时,会把其中的代码经过500ms后放到执行队列中,但是之后执行while循环,while循环会占据计算机资源,要占据1000ms,在这1000ms中执行队列中的任务都得等待,直到while循环结束

可以看出setTimeout的原理就是在经过给定的时间后,将任务添加到队列中,等待cpu调度执行,它并不能保证任务在什么时候执行

setTimeout(function(){..},0)的意义

有时候见过这样的代码:

 setTimeout(function(){  //........... },0);

经过前面的学习,我会以为是当代码执行到setTimeout时,会立即将任务添加到执行队列中。其实不然,虽然给定的延迟执行时间是0,但是setTimeout有自己的最小延迟时间(根据浏览器的不同而不同),所以即使写了0s,但是setTimeout还是会在最小延迟时间后才添加任务到执行队列中

设置为0s的作用是为了可以改变任务的执行顺序!因为浏览器会在执行完当前任务队列中的任务,再执行setTimeout队列中积累的的任务

例如:

window.onload = function(){ document.querySelector('#one input').onkeydown = function(){  document.querySelector('#one span').innerHTML = this.value; }; document.querySelector('#two input').onkeydown = function(){  setTimeout(function(){  document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;  },0) } }

会产生这样的问题:

可以发现采用第一种写法时,只会获取到键盘按下前,输入框中的内容

产生问题的原因是当我们按下键盘时,JavaScript引擎会执行keydown的事件处理程序,而更新输入框中的值是在此之后执行的,所以当获取输入框中的值(this.value)时,输入框中的值还为更新。

解决方法就是利用setTimeout,在更新了输入框的值后,在获取它的值

setTimeout的this指向和参数问题

setTimeout中回调函数的this是指向window的

例如:

var a = 1; var obj = {  a : 2,  output : function(){  setTimeout(function(){   console.log(a);  },0);  } } obj.output(); //1

但我们可以利用apply()、call()和bind()来改变this的指向

在setTimeout通常是两个参数,但是它可以由多个参数

例如:

 setTimeout(function(a,b){  console.log(a); //2  console.log(b); //4  console.log(a + b); //6 },0,2,4);

可以看到,这些多的参数就是回调函数中要传入的参数

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

excel中if函数嵌套式使用教程

excel中if函数嵌套式使用教程

函数,嵌套,使用教程,数据统计,示例,  Excel中经常需要使用到if函数的时候需要嵌套进行判断更多条件,if函数嵌套式具体该如何使用呢?下面是由小编分享的excel中if函数嵌套式使用教程,以供大家阅读和学习。excel中if函数嵌套式使用教程嵌套if…

猜不透的心经典个性签名

猜不透的心经典个性签名

不透,个性签名,热门,简单,新篇,  人人都有一颗心。心之官则思。猜不透的心,难猜的心,你想表达什么呢?猜不透的心经典个性签名有哪些的呢?本文是小编整理猜不透的心经典个性签名的资料,仅供参考。猜不透的心经典个性签名【简单篇】&ldquo;灯红…

d3.js入门教程之数据绑定详解

d3.js入门教程之数据绑定详解

数据绑定,详解,入门教程,电脑软件,js,前言d3.js 是一款上手容易的js类库,专门用于绘制svg图形图表,其关键理念为data-join 意即数据绑定.搞清这个概念非常重要,它将以简洁优雅的形式体现数据驱动编程.以下是Thinking with Joins的拙译 ,原…

浅谈javascript中的 “ && ” 和

浅谈javascript中的 “ && ” 和

浅谈,电脑软件,javascript,有时候,我们会在jQuery框架或者其他js插件中发现里面有很多 “ && ” 和 “ || ”,那么这两个标识到底是什么含义?怎么使用?我觉得还是有必要稍微深究一下。一、原理:&& 操作符特点:逻辑运算表达式中只要一个是false就…

Word2007怎样快速转换成PDF格式

Word2007怎样快速转换成PDF格式

转换成,快速,格式,电脑软件,PDF,  Word和PDF是常见的办公文档格式,这两种格式有时需要进行格式转换。那么下面就由小编为您分享下Word2007快速转换成PDF格式的技巧,希望能帮助您,有需要的朋友可以来看看哦。快速转换成PDF格式的步骤如下:  …

JavaScript数组迭代方法

JavaScript数组迭代方法

数组,方法,迭代,电脑软件,JavaScript,最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历、转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询。数组常用的迭代方法ECMAScript5为数组定义…

微信指纹支付如何取消

微信指纹支付如何取消

支付,取消,指纹,电脑软件,  当你在使用微信指纹支付时,偶尔会需要一些小问题,想要关闭指纹支付的方法也很简单,根据本文提供的图文教程即可轻松取消指纹支付,一起来看看吧!微信指纹支付如何取消其实关闭指纹支付的方法更加简单,和开启时程序一…

微信读书怎么免费看书?

微信读书怎么免费看书?

电脑软件,  微信读书怎么免费看书?不知道大家发现没有,微信读书app上面的书虽然都非常的有品位,推荐的书都是非常值得一读的好书,但是你们注意到标价没有?是不是有一丢丢高啊?那么在这里小编要告诉大家微信读书免费看书的方法,赶紧来mark~!微…

AngularJS2中一种button切换效果的

AngularJS2中一种button切换效果的

方法,效果,电脑软件,button,之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式:路由<button class="btn1" routerLink="component1" routerLinkActive=…

excel2007插入表单控件的教程excel

excel2007插入表单控件的教程excel

表单,控件,教程,电脑软件,strong,  Excel中的表单控件该如何插入呢?下面是小编带来的关于excel2007插入表单控件的教程,希望阅读过后对你有所启发!excel2007插入表单控件的教程插入表单步骤1:先看下效果,下面是两个调查表单,左边使用的是单选…

word2016文档中怎么切换插入改写模

word2016文档中怎么切换插入改写模

模式,文档,电脑软件,  很多用户在使用word时,输入空格后面的字就消失了,这是因为无意间切换了word的&ldquo;改写/插入&rdquo;模式。以下是小编为您带来的关于word2016文档切换插入改写模式,希望对您有所帮助。word2016文档切换插入改写模式…

浅谈jQuery中事情的动态绑定

浅谈jQuery中事情的动态绑定

动态绑定,浅谈,事情,电脑软件,jQuery,在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如何使用bind(),on(),live()…