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);

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

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

# setTimeout # JS中setTimeout的巧妙用法前端函数节流 # 快速掌握Node.js中setTimeout和setInterval的使用方法 # JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单) # JavaScript中SetInterval与setTimeout的用法详解 # javascript中SetInterval与setTimeout的定时器用法 # JavaScript中setTimeout的那些事儿 # JavaScript中停止执行setInterval和setTimeout事件的方法 # js中setTimeout()与clearTimeout()用法实例浅析 # Javascript的setTimeout()使用闭包特性时需要注意的问题 # js中的setInterval和setTimeout使用实例 # js中settimeout方法加参数 # 框中 # 自己的 # 会在 # 按下 # 回调 # 的是 # 延迟时间 # 是因为 # 我会 # 看了 # 多个 # 在这 # 在此 # 什么时候 # 见过 # 执行时间 # 只会 # 可以看到 # 写了 # 它可以

返回目录在线咨询

上一篇：超市网站怎么制作视频,怎么开网上超市？
下一篇：Python使用Django搭建复杂Web系统的架构关键点【教学】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

setTimeout学习小结

您的项目需求