setTimeout学习小结


Posted in Javascript onFebruary 08, 2017

大致介绍

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

原文:你应该知道的 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)
 }
 }

会产生这样的问题:

setTimeout学习小结

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

产生问题的原因是当我们按下键盘时,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);

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

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

Javascript 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python import与from import使用及区别介绍
2018/09/06 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
教师专业自荐信
2014/05/31 职场文书
安全标语口号
2014/06/09 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
党员证明信
2015/06/19 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python