▓▓▓▓▓▓ 大致介绍

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

  原文:你应该知道的 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. [Asp.Net Core轻量级Aop解决方案]AspectCore Project 介绍

    AspectCore Project 介绍 什么是AspectCore Project ? AspectCore Project 是适用于Asp.Net Core 平台的轻量级 Aop(Aspect- ...

  2. iOS开发——Localizable.strings

    这篇写的不多,但是绝对诚意满满.不会像别人一样,要不不详细,要不罗里吧嗦一堆. 1.创建Localizable.strings文件 Command+N—>iOS—>Resource—> ...

  3. ARM的启动代码(1):介绍(转)

    源:ARM的启动代码(1):介绍 很多朋友搞嵌入式,写起代码来一点问题没有,到最后上板子调试的时候,挂了.究其原因,还是对芯片的启动地址.启动方式.bootloader和操作系统的衔接出了问题.今天就 ...

  4. javascript中的__proto__和prototype

    一.2个参考网址: http://icekiller110.iteye.com/blog/1566768 http://www.cnblogs.com/snandy/archive/2012/09/0 ...

  5. UVa 507 - Jill Rides Again

    题目大意:最大和子序列问题.由于具有最大和的子序列具有一下性质:第一项不为负数,并且从第一项开始累加,中间不会有和出现负数,因为一旦有负数我们可以抛弃前边的部分以得到更大的子序列和,这将会产生矛盾. ...

  6. imageX批量安裝windows7

    以一臺電腦爲sample,安裝完成windows os及其全部update,安裝全部常用軟件,打印機驅動,網絡磁碟機等. 關閉安全控制"UAC"和"維護解決方案" ...

  7. CSS3 :target伪类的理解与使用

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...

  8. Angular - - $rootScope.Scope

    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...

  9. 2. 托管对象数据模型的基本知识(Core Data 应用程序实践指南)

    第一章的例子配置好了持久化存储区.持久化存储协调器.托管对象上下文.但是还没有对象图,本章要介绍托管对象模型的基础知识,并配置范例程序的对象图. 2.1. 托管对象模型是什么 托管对象模型是一种数据结 ...

  10. 2.13.3:获取请求模板(Core Data 应用程序实践指南)

    可以不用手动写谓词,用Xcode的Data Model Designer.只是要用到AND .OR等逻辑组合时,还得用代码写谓词. 程序示例操作如下: 选中Model.xcdatamodeld 点击E ...