var len=4; while(len--){ setTimeout(function(){ alert(len); },0); alert(len); } 这个题目的答案我先说出来,读者请仔细考虑,为什么. 答案是3,2,1,0,-1,-1,-1,-1. 重点是 setTimeout的异步.…

两道经典的面试题,直接上代码 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var i = 1; console.log(i); 会输出什么呢?先想一想,记下答案.继续下一题 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } console.log(i); 改动很少,结果却相差…

同步任务和异步任务 同步和异步操作的区别就是是否阻碍后续代码的执行. 同步任务是那些没有被引擎挂起.在主线程上排队执行的任务.只有前一个任务执行完毕,才能执行后一个任务. 异步任务是那些被引擎放在一边,不进入主线程.而进入任务队列的任务.只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果)[发布订阅],该任务(采用回调函数的形式)才会进入主线程执行.排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应. 在setTimeout的执行…

一道经典的前端笔试题,你能一眼写出他们的执行结果吗? async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log( 'async2'); } console.log("script start"); setTimeout(functi…

前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的,在与博友的分享中可以学到新的知识.得到先驱者的指正.解决工作中遇到的难题.近一个月工作繁忙,新的文章也迟迟未写,今天呢,过来深入了解一下 关于javascript定时器的知识: setTimeout与setInterval简述 setTimeout与setInterval使用方法基本相同,他们接受两…

本篇文章主要介绍了异步编程promise模式的简单实现,并对每一步进行了分析,需要的朋友可以参考下 异步编程 javascript异步编程, web2.0时代比较热门的编程方式,我们平时码的时候也或多或少用到,最典型的就是异步ajax,发送异步请求,绑定回调函数,请求响应之后调用指定的 回调函数,没有阻塞其他代码的执行.还有像setTimeout方法同样也是异步执行回调的方法. 如果对异步编程还不太熟悉的话,直接戳 阮一峰大牛的教程 ,这篇文章介绍了四种异步编程的方式: 回调函数 事件监听 发布…

js里的setTimeout和setInterval是否进程阻塞? 阻塞浏览器的document对象,但是不阻塞script方法 当你在setTimeout中使用document.write时是不行的,但是可以setTimeout中调任何方法,而且可以多调用   .这样可能会导致setTimeout之后的页面元素不能输出,页面显示不全,页面空白. 建议搜索一下:settimeout异步…

前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议你花点时间学习JavaScript异步编程,如果你对异步编程有自己的独特理解,也欢迎阅读本文,一起交流. 同步与异步 介绍异步之前,回顾一下,所谓同步编程,就是计算机一行一行按顺序依次执行代码,当前代码任务耗时执行会阻塞后续代码的执行. 同步编程,即是一种典型的请求-响应模型,当请求调用一个函数或方…

1.JavaScript异步编程的两个核心难点 异步I/O.事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络.文件访问功能,且使之在后端实现了较高的性能.然而异步风格也引来了一些麻烦,其中比较核心的问题是: 1.函数嵌套过深 JavaScript的异步调用基于回调函数,当多个异步事务多级依赖时,回调函数会形成多级的嵌套,代码变成 金字塔型结构.这不仅使得代码变难看难懂,更使得调试.重构的过程充满风险. 2.异常处理 回调嵌套不仅仅是使代码变得杂乱,也使得错误处理更复杂.这…

同步与异步 介绍异步之前,回顾一下,所谓同步编程,就是计算机一行一行按顺序依次执行代码,当前代码任务耗时执行会阻塞后续代码的执行. 同步编程,即是一种典型的请求-响应模型,当请求调用一个函数或方法后,需等待其响应返回,然后执行后续代码. 一般情况下,同步编程,代码按序依次执行,能很好的保证程序的执行,但是在某些场景下,比如读取文件内容,或请求服务器接口数据,需要根据返回的数据内容执行后续操作,读取文件和请求接口直到数据返回这一过程是需要时间的,网络越差,耗费时间越长,如果按照同步编程方式实现,在…

本人正在努力学习前端,内容仅供参考.由于各种原因(不喜欢博客园的UI),大家可以移步我的github阅读体验更佳:传送门,喜欢就点个star咯,或者我的博客:https://blog.tangzhengwei.me 掘金:传送门,segmentfault:传送门 前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: "JavaScript 是单线程.异步.非阻塞.解…

前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: “JavaScript 是单线程.异步.非阻塞.解释型脚本语言.” 单线程 ? 异步 ? ? 非阻塞 ? ? ? 然后,这又牵扯到了事件循环.消息队列,还有微任务.宏任务这些. 作为一个初学者,对这些了解甚少. 这几天翻阅了不少资料,似乎了解到了一二,是时候总结一下了,它们困扰了我好一段时间,就像学高数那会儿自己…

一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { var itemFile = files[i]; fs.stat("./uploads/" + itemFile, function (err, stats) { if (stats.isDirectory()) { console.log(itemFile+i); } else { c…

这几天跟着视频学习node.js,碰到很多的异步函数的问题,现在将for循环中出现的异步函数回调值的问题总结如下: 具体问题是关于遍历文件夹中的子文件夹的,for循环包裹异步函数的代码: for (var i = 0; i < files.length; i++) { var itemFile = files[i]; fs.stat("./uploads/" + itemFile, function (err, stats) { if (stats.isDirectory())…

下面代码打印结果是? setTimeout(()=>{ console.log(1) }) new Promise((resolve,reject)=>{ console.log(2) resolve() }) .then(()=>{ console.log(3) }) new Promise((resolve,reject)=>{ console.log(4) resolve() }) .then(()=>{ console.log(5) }) setTimeout(()=…

昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 async function timeout() { return 'hello world';}  语法很简单,就是在函数前面加上asyn…

一.概念理解 1.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变.所以一切javascript版的"多线程"都是用单线程模拟出来的. 2.多线程/单线程的简单理解: 多线程: 程序可以同一时间做几件事. 单线程: 程序同一时间只能做一件事. 3.JS为什么是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScri…

大家如果看了前面两课,就知道Deferred的静态方法next(next_default)是用setTimeout实现的(有浏览器最小时钟间隔).但是实现这种异步操作,可以有很多种方法.JSDeferred中,针对老版本IE,以及标准浏览器都专门使用了一些方法来实现异步操作,提高异步操作的性能提速. 首先,我们先来看下针对老版本IE的提速. Deferred.next_faster_way_readystatechange = (location.protocol == "http:"…

目录: Cookie 是否会被覆盖,localStorage是否会被覆盖? 如何保持登陆状态? Ajax原生 Jsonp的原理.怎么去读取一个script里面的数据. 如果页面初始载入的时候把ajax请求返回的数据存在localStorage里面,然后每次调用的时候去localStorage里面取数,是否可行. 304是什么意思? 强缓存和协商缓存的命中和管理 http请求和响应的消息结构 http请求头有哪些字段 http响应常见状态码 简述http 1.1 与 http 1.0的区别 请列举…

本文并不是一篇iframe API文档讲解,因此想了解iframe API的同学请移步 MDN, 我将在现在浏览器的角度与大家取探讨iframe, 因此,本文中虽然会提及一些iframe在旧浏览器中的应用, 但并不会去讲解. 所以,您对iframe在旧浏览器中的应用场景感兴趣的话,还请自己搜索相关资料. 同时, 我也会从浅入深的来与大家探讨iframe中的一些特性.各种现代浏览器中的渲染模式.应用场景.以及在现代开发中的影响. 什么是iframe 在HTML中有三种结构特征:树结构.层次结构.框…

大家都知道,因为历史原因,移动端上的点击事件会有 300ms 左右的延迟,Zepto 的 touch 模块解决的就是移动端点击延迟的问题,同时也提供了滑动的 swipe 事件. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 实现的事件 ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeD…

关于 promise 吃到错误的理解 下面的内容需要对浏览器原生支持的 promise 的基本用法有了解,如果你还不知道 promise 和 promise 的 catch 方法,你可能需要先在 这里 了解一下. 在 阮一峰大神的 <ECMAScript 6 入门> 关于 Promise 对象那一章在介绍 Promise.prototype.catch() 方法时,里面有一句描述是这样写的 : 跟传统的try/catch代码块不同的是,如果没有使用catch方法指定错误处理的回调函数,Prom…

一般情况下,仅从代码上看只要不出现死循环,是不会出现堆栈调用溢出的.但是某些情况下列外,比如下面这段代码: var a = 99; function b (){ a --; if (a > 0){ b(); } else { console.info(a); } } b(); => 0 这并不是死循环,当变量 a逐渐减少到0时,递归就终止了.乍一看是不会出现任何问题的,但是如果我们把 a增加到一个较大的数值,就会出现问题: 如图所示,一个范围错误的异常抛了出来,我们被告知"超过了最大…

1:tab的路由导向问题 运用ion-tabs时,第一个ion-tabs标签下的href功能会覆盖掉路由中定义的默认路由(进入应用后直接加载href指向的组件). 解决方法:多写一个ion-tabs标签,然后将href指向写为空,这样就直接加载了路由文件中路由为空的情况的组件,然后再讲这个ion-tabs标签隐藏起来. 2:tab导航位置在页面顶部: .config(function ($ionicConfigProvider) { $ionicConfigProvider.backButton…

es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向的调用,也就是链式调用. 我们先来看下面的代码: function getData(){ setTimeout(()=>{ var name = "zhangsan"; }, 1000) } getData(); 在上面的代码中,我们模拟了一个异步时间,一秒后输出 name = &q…

关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插件中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考 在这之前,先看看原生checkbox搭配jquery取值的用法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <input type="check…

译者按: 错误是无法避免的,妥善处理它才是最重要的! 原文: A Guide to Proper Error Handling in JavaScript Related Topics: 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 如果你相信墨菲定律的话,任何事情如果会出问题,那么就一定会出问题.对于代码,即使我们有100%的自信没有问题,依然有可能出问题.在这篇文章,我们来研究如何处理JavaScript的错误.我会先介绍坏的处…

// js 6种数据类型:字符串.数值.布尔值.undefined.null.object // 三种非数字的数字类型:Infinity -Infinity NaN var str = "Hello,world" //string var i = 10 //number var f = 2.3 //number var b = true //boolean var leftShift = 1 << 2 // 一些容易忘记的东西 // 1.string 是可以用 < &…

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象. Promise就是一个对象,Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject .它们是两个函数,由 JavaScript 引擎提供,不用自己部署. // 第一步:定义一个Promise对象const promise = new Promise(fu…

前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考 在这之前,先看看原生checkbox搭配jquery取值的用法 <input type="checkbox" name="hobby"…