彻底理解setTimeout()

之前在网上看了很多关于setTimeout的文章,但我感觉都只是点到为止,并没有较深入的去剖析,也可能是我脑袋瓜笨,不容易被点解.后面看了<你不知道的javascript-上卷>一书,决定重新再来理一次.这次我觉得我应该整明白了.于是分享给大家,文中解释有错误的部分还希望大家留言指正. 首先我们还是来看那道大家再熟悉不过的前端面试题: for (var i = 1;i <= 5;i ++) { setTimeout(function timer() { console.log(i) },…

理解setTimeout()

深入理解定时器系列第一篇——理解setTimeout和setInterval

× 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用前面的话很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通常只了解如何使用setTimeout()和setInterval(),对它们的内在运行机制并不理解,对于与预想不同的实际运行状况也无法解决.本文将详细介绍定时器的相关内容 setTimeout() setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行.它返回一个整数,表示定时器…

深入理解setTimeout和setinterval

以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval还有点不一样…

一道题理解setTimeout,Promise,async/await以及宏任务与微任务

今天看到这样一道面试题: //请写出输出内容 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.log('setTimeout…

深入理解setTimeout的作用域

看了一篇关于setTimeout作用域的问题,其实之前在<javascript高级程序设计>时也看到了,分享给大家: 先总结下: 一.setTimeout中的延迟执行代码中的this永远都指向window 二.setTimeout(this.method, time)这种形式中的this,即上文中提到的第一个this,是根据上下文来判断的,默认为全局作用域,但不一定总是处于全局下,具体问题具体分析. 三.setTimeout(匿名函数, time)这种形式下,匿名函数中的变量也需要根据上下文来…

理解setTimeout和setInterval

setTimeout和setInterval,这两个js函数都是用来定时执行.setTimeout执行一次,setInterval执行多次. 问题出现在今天,使用setInterval是,设置执行速度为1ms.这时setInterval就出现了延迟.它并没有严格按照1ms的速度执行. ; task1 = setInterval(function(){ var val1=parseInt(document.getElementById('font1').innerHTML); && val1…

JavaScript的setTimeout和setInterval的深入理解

发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和setInterval是如何工作的呢? 我们知道,js是单线程执行的(单线程j就是说在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行).所以其实setTimeout和setInterval所谓的"异步调用"事实上是通过将代码段插入到代码的执行队列中实现的. 而如何…

setTimeout和setInterval的深入理解

以前写的setTimeout和setInterval的文章有些不足之处,今天抽时间整理了一下,要想真正理解还得从javascript的单线程机制说起大概半年前发表过一篇关于setTimeout和setInterval的文章,但是现在回去仔细一看发现其实存在很多不足以及错误.事实上,setTimeout和setInterval并没有我们字面上理解的那么简单.要真正掌握并理解这两个方法,还得从javascript的单线程机制说起. [开门见山]setTimeout和setInterval是如何工作…

setTimeout运行机制简要理解

经典例子辅助理解setTimeout工作原理运行结果: 约1秒后输出:1,再过约1秒后输出:2,接着才立即输出:时间流逝了: 2002 毫秒最后输出:时间又流逝了: 2003 毫秒在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法…

setTimeout那些事儿

一.setTimeout那些事儿之单线程一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们在编程过程中的setTimeout(类似的还有setInterval.Ajax),不是异步执行的吗?!! 例如: <!DOCTYPE html> <head> <title>setTimeout</title> <meta http-equiv="…

一道经典面试题-----setTimeout(function(){}，0)

一道经典面试题-----setTimeout(function(){},0) 转载: http://www.w3cfuns.com/notes/17398/e8a1ce8f863e8b5abb530069b388a158/page/3.html#tagsbar 先看题: for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果是:0 1 2 3 3 3 很多公…

Javascript异步编程之setTimeout与setInterval详解分析(一)

Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛多多原谅!) 1. setTimeout与setInterval详细分析基本原理. 2. 分布式事件(pub/sub). 3. Promise对象和Deferred对象. 接下来这篇博客会总结setTimeout和setInterval基本点,对于上面三点会分三篇博客分别来总…

我想这次我真的理解了 JavaScript 的单线程机制

今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触了单线程模型相关的东西,但当时理解得并不是很清楚和明白.所以这道面试题也没有给出一语中的的答案.重新阅读阮一峰的 <JavaScript 运行机制详解>和我之前写的<setTimeout 异步与回调>之后.我决定重新写一篇博客来更加白话的总结 JS 的单线程机制和异步. 重演历史 -…

js异步处理工作机制(setTimeout, setInterval)

经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文————————————————————————————— 从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下下面三个函数是如何控制计时器的. var id = setTimeout(fn, de…

【转】Javascript异步编程之setTimeout与setInterval

Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程( 注意: 特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛多多原谅!) 1. setTimeout与setInterval详细分析基本原理. 接下来这篇博客会总结setTimeout和setInterval基本点,对于上面三点会分三篇博客分别来总结,对于知道上面三点的人…

JavaScript运行机制与setTimeout

前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. 1.JavaScript运行机制核心特征:单线程 JavaScript在浏览器中是单线程运行的.所谓单线程,就是同一时刻只执行一个任务,简单来讲,就是任何时刻JS主线程都只有一句JavaScript代码在运行. 那么为什么JavaScript一定要是单线程呢?如果同时有多个线程运行岂不更强大吗?关…

setTimeout(function(){}, 0);

for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果是: 0 1 2 3 3 3 分析: 1.在实践中,setTimeout 会在其完成当前任何延迟事件的事件处理器的执行,以及完成文档当前状态更新后,告诉浏览器去启用 setTimeout 内注册的函数. 2.setTimeout是异步的.正确的理解setTimeout的方式(注册事件): 有两个参数,第一…

JavaScript填坑史

说明: 这是笔者平时积累的一些觉得比较有意思或是比较有难度的JavaScript题目理解和心得,会保持长期更新. 1.setTimeout和setInterval深入理解在setTimeout和setInterval深入理解这篇博客里笔者曾做过总结,我们知道JavaScript试单线程的产物,两个函数就是利用了插入代码的方式实现了伪异步,和AJAX的原理实际上是一样的.下面来看下这个例子: console.log("1"); setTimeout(function(){ conso…

javascript执行机制

文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,所以我们以为js都是这样的: let a…

彻底弄懂 JavaScript 执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,所以我们以为js都是这样的: let a…

JavaScript 执行机制

一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTick 二.JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javasc…

转载---JavaScript执行机制

很好的一篇文章,原地址 JavaScript执行机制这一次,彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道js是…

this全解js

转(掘金) this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JavaScript开发者并不是非常清楚它究竟指向的是什么.听说你很懂this,是真的吗? 请先回答第一个问题:如何准确判断this指向的是什么?[面试的高频问题] ——————————————————————————————————————————————[图片来源于网络,侵删] 再看一道题,控制台打印出来的值是什么?[浏览器运行环境] var number =…

Promise（interesting）

// 最主要的是理解setTimeout和(浏览器执行程序 || resolve执行位置)的顺序就能吃透了 //(MD 楞是看了我2个小时时间真的是费脑洞︿(￣︶￣)︿)X.then.then 以下:我把完整版摘出来 try { module.exports = Promise } catch (e) {} function Promise(executor) { var self = this self.status = 'pending' self.onResolvedCallback =…

【js】javaScript 执行机制

javascript 是一门单线程语言(按照语句一行一行的执行) let a = '1'; console.log(a); let b = '2'; console.log(b); 这样子正常执行是没有问题,但是当碰到异步的情况,比如 setTimeout(function(){ console.log('定时器开始啦') });new Promise(function(resolve){ console.log('马上执行for循环啦'); for(var i = 0; i < 10000;…

promise的学习心得记录

这里只讲promise,和async的使用方法,不会讲他们的原理. Promise 是异步编程的一种解决方案,可以用于取代传统的回调函数,该变那些函数层层嵌套调用的尴尬局面. 1)promise 基本语法: var p= new Promise(function(resolve,reject){ if(....) resolve(); else reject(.....); }); p.then(function(){//resolve ....... }).catch(function(){/…

你不知道的js异步、作用域、闭包

例题如下: for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果是:0 1 2 3 3 3很多公司面试都爱出这道题,此题考察的知识点还是蛮多的.为了防止初学者栽在此问题上,此文稍微分析一下.都考察了那些知识点呢?异步.作用域.闭包,你没听错,是闭包.我们来简化此题: setTimeout(function() { …

JS高级技巧(简洁版)

高级函数由于在JS中,所有的函数都是对象,所以使用函数指针十分简单,也是这些东西使JS函数有趣且强大安全的类型检测 JS内置的类型检测机制并不是完全可靠的 typeof 操作符返回一个字符串,表示未经计算的操作数的类型,在大多数情况下很靠谱,但是当然还有例外正则表达式 typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1 typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAS…

[ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!

作为入门者来说.了解JavaScript中timer的工作方式是非常重要的.通常它们的表现行为并非那么地直观,而这是由于它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. var id = setTimeout(fn, delay); - 初始化一个单一的timer,这个timer将会在一定延时后去调用指定的函数.这个函数(setTimeout)将返回一个唯一的ID,我们能够通过这个ID来取消timer. var id = setInterval(fn, delay…

【彻底理解setTimeout()】的更多相关文章