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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
玩转方法:call和apply
May 08 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
npm的lock机制解析
Jun 20 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python tqdm库的使用
2020/11/30 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
linux下进程间通信的方式
2014/12/23 面试题
个人实用简单的自我评价
2013/10/19 职场文书
会计学应届毕业生推荐信
2013/11/04 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
创业培训计划书
2014/05/03 职场文书
汽车专业求职信
2014/06/05 职场文书
婚礼答谢礼品
2015/01/20 职场文书
学风建设主题班会
2015/08/17 职场文书
golang中的空接口使用详解
2021/03/30 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android