▓▓▓▓▓▓ 大致介绍

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

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

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

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

  例如:

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

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

setTimeout小总结的更多相关文章

  1. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  2. 2020已经过去五分之四了,你确定还不来了解一下JS的rAF?

    不会吧,不会吧,现在都2020年了不会还真人有人不知道JS的rAF吧??? rAF 简介 rAF是requestAnimationFrame的简称: 我们先从字面意思上理解requestAnimati ...

  3. 【微信小程序】使用setTimeout制作定时器的思路

    setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟. 下面是在微信小程序中的使用思路,只截取了关键部分代码. var timer; // ...

  4. 微信小程序—setTimeOut定时器的坑

    原文地址: http://fanjiajia.cn/2018/06/27/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94setTimeOu ...

  5. 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy

    前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...

  6. setTimeout的小尴尬

    我们都知道,alert这种内置弹框会阻塞后续代码执行: 之所以如此,就是因为JavaScript代码在浏览器中是单线程执行的.换句话说,浏览器中只有一个主线程负责运行所有JavaScript代码(不考 ...

  7. [微信小程序] 当动画(animation)遇上延时执行函数(setTimeout)出现的问题

    小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错.本文先告诉解决方法,后分析报错原因 1.解决方法: 在 setTimeout() ...

  8. setInterval和setTimeout调用方法小知识科普

    function a() { alert('hello'); } setInterval(a, ); setInterval(a(), ); setInterval(); setInterval(); ...

  9. JavaScript 关于setTimeout与setInterval的小研究

    说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...

随机推荐

  1. 系统管理员必须掌握的20个Linux监控工具

    需要监控Linux服务器系统性能吗?尝试下面这些系统内置或附件的工具吧.大多数Linux发行版本都装备了大量的监控工具.这些工具提供了能用 作取得相关信息和系统活动的量度指标.你能使用这些工具发现造成 ...

  2. stm32-ucos移植lwip-1(raw)

    之前在裸机环境下移植了lwip,功能还是很强大的,但是就我看来,这和uip其实差别也不大,其实lwip更强大的功能需要在操作系统之下才能发挥出来,今天就来做这个 首先我们需要移植操作系统,系统选择uc ...

  3. iOS子线程更新UI的两种方法

    http://blog.csdn.net/libaineu2004/article/details/45368427 方法1:performSelectorOnMainThread[self perf ...

  4. Mapreduce 反向索引

    反向索引主要用于全文搜索,就是形成一个word url这样的结构 file1: MapReduce is simple file2: MapReduce is powerful is simple f ...

  5. iOS开发 missing iOS distribution signing identity for 。。。

    苹果真是不让人省心,新年一来上传APP,就出现Missing iOS Distribution signing indetity for xxx 于是就把证书删了做,做了删了再重做,还是不行 百度了一 ...

  6. UVA 11542 Square ——线性基

    [题目分析] 每个数没有超过500的因子.很容易想到把每一个数表示成一个二进制的数. (0代表该质数的次数为偶数,1代表是奇数) 然后问题转化成了选取一些二进制数,使他们的异或和为0. 高斯消元,2^ ...

  7. Badboy安装与使用

    Badboy是一个录制web脚本的工具 1.下载Badboy:http://www.badboy.com.au/download/add 2.启动Badboy,认识主界面 3.使用Badboy录制we ...

  8. Motion-Based Multiple Object Tracking

    kalman filter tracking... %% Motion-Based Multiple Object Tracking % This example shows how to perfo ...

  9. JAVA控制台输入输出方法总结

    java的控制台输入输出有很多方法,此文分别对其进行介绍. 1.控制台的输入 关于控制台的输入主要介绍三种方法,第一种方法使用BufferedReader获得控制台输入的数据,此方法是传统的输入方法, ...

  10. Cassandra 单机入门例子——有索引

    入门例子: http://wiki.apache.org/cassandra/GettingStarted 添加环境变量并source生效,使得可以在任意位置执行cassandra/bin安装目录下的 ...