▓▓▓▓▓▓ 大致介绍

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

  原文:你应该知道的 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. 笔记:利用 Cocos2dx 3.2 与 Box2D制作一个跑酷游戏(上)

    最近写lua写得没有力气了,所以想让脑袋放松一下,刚好看到有人在用swift做游戏: Swift游戏实战-跑酷熊猫 于是脑子一短路,就想到了利用这些素材来做一个游戏. 本来不想记笔记的,但是由于选择物 ...

  2. iOS开发——NSArray中的字典排序

    手头上碰到一个项目,需要给数组中的字典中的一个字段排序,想了想,干脆再字典中增加一个字段,用来记录需要排序字段的第一个字符,用它来作为比较的对象,进行排序. - (void)viewDidLoad { ...

  3. Android L(5.0)源码之手势识别onTouchEvent

    onTouchEvent同样也是在view中定义的一个方法.处理传递到view 的手势事件.通过MotionEvent的getAction()方法来获取Touch事件的类型,类型包括ACTION_DO ...

  4. Android应用运行过程(转)

    源:Android应用运行过程 首先,ActivityThread从main()函数开始执行,调用prepareMainLooper()为UI线程创建一个消息队列(MessageQueue). 然后创 ...

  5. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

  6. leetcode-位运算

    位运算可以大大减小算法空间复杂度,提高效率,很巧妙! 先说一下位运算的简单用法 1. 按位与 & 用途:清零,取一个数中的某些指定位,保留一个数中的某些指定位 2. 按位或 | 用途:将一个数 ...

  7. [Angular Tutorial] 10 -More Templating

    在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现 ...

  8. windows下Nodejs环境部署

    前言 Nodejs是基于v8引擎的轻量级框架,其特点为事件驱动.非阻塞.单线程.异步回调等. Nodejs相对于其他运行在服务器端的语言,容易学习,使用方便. 本文将介绍windows下Nodejs的 ...

  9. prism silverlight

    转自  http://www.cnblogs.com/li-xiao/archive/2011/01/13/1934564.html   Prism简介 Prism是由微软Patterns & ...

  10. 译者序(Core Data 应用开发实践指南)

    Core Data 是数据管理框架. 该书用Grocery Dude 购物管理程序来贯穿整个学习过程. 本书共分三个部分: 前7章为基础篇.从基础知识.迁移方式及扩展方式来讲解托管对象模型.怎么用图形 ...