;

setTimeout(function(){console.log(1)},0); new Promise(function(resolve){ console.log(2) for( var i=0 ; i<10000 ; i++ ){ i==9999 && resolve() } console.log(3) }).then(function(){ console.log(4) }); console.log(5); // 答案是 2 3 5 4 1 // 而不是 2 3 5 1 4 event loop 的概念 Javascript是单线程的,所有的同步任务都会在主线程中执行。 当主线程中的任务,都执行完之后,系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程,开始执行。 异步任务之间,会存在差异,所以它们执行的优先级也会有区别。大致分为 微任务(micro task,如:Promise、MutaionObserver等)和宏任务(macro task,如:setTimeout、setInterval、I/O等)。 Promise 执行器中的代码会被同步调用,但是回调是基于微任务的。 宏任务的优先级高于微任务 每一个宏任务执行完毕都必须将当前的微任务队列清空 第一个 script 标签的代码是第…

promise和setTimeout执行顺序 5 天前
;

1. Doctype   目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   <title>HTML Email编写指南</title>   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  </head> </html&gt…

html email 2019年11月5日
;

1. function sleep(duration) { return new Promise(function(resolve, reject) { console.log("b"); setTimeout(resolve,duration); }) } console.log("a"); var s = sleep(2000); setTimeout(function(){console.log("wait")},2000); s.then(()=>console.log("c")); 来源:https://blog.csdn.net/nana_9457/article/details/88224472 2. (function test(){ setTimeout(function(){ console.log(4); },0) new Promise(function(resolve){ console.log(1); for(var i=0;i<1000;i++){ i==999&&resolve(); } console.log(2) }).then(function(){ console.log(5) }); conso…

promise与setTimeout的执行顺序 2019年10月28日
;

一.什么是对象序列化?   对象序列化是指将对象的状态转换为字符串(来自我这菜鸟的理解,好像有些书上也是这么说的,浅显易懂!);   序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程(来自“百度百科—序列化“,学术性强,略显高端); 二.为什么会有对象序列化?   世间万物,都有其存在的原因。为什么会有对象序列化呢?因为程序猿们需要它。既然是对象序列化,那我们就先从一个对象说起: var obj = {x:1, y:2};   当这句代码运行时,对象obj的内容会存储在一块内存中,而obj本身存储的只是这块内存的地址的映射而已。简单的说,对象obj就是我们的程序在电脑通电时在内存中维护的一种东西,如果我们程序停止了或者电脑断电了,对象obj将不复存在。那么如何把对象obj的内容保存在磁盘上呢(也就是说在没电时继续保留着)?这时就需要把对象obj序列化,也就是说把obj的内容转换成一个字符串的形式,然后再保存在磁盘上。另外,我们又怎么通过HTTP协议把对象obj的内容发送到客户端呢?没错,还是需要先把对象obj序列化,然后客户端根据接收到的字符串再反序列化(也就是将字符串还原为对象)解析出相应的对象。这也正是”百度百科—序列化“中描述的两个作用——存储、传输。 三.JavaScript中的对象序列化   J…

JavaScript之对象序列化详解 2019年10月22日
;

在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object”,“function”,“symbol” (ES6新增)七种。 对于数组、null、对象来说,其关系错综复杂,使用 typeof 都会统一返回 “object” 字符串。 要想区别对象、数组、函数单纯使用 typeof 是不行的,JavaScript中,通过Object.prototype.toString方法,判断某个对象值属于哪种内置类型。 在介绍Object.prototype.toString方法之前,我们先把toString()方法和Object.prototype.toString.call()方法进行对比。 toString()方法和Object.prototype.toString.call()方法对比 var arr=[1,2]; //直接对一个数组调用toString() arr.toString();// "1,2" //通过call指定arr数组为Object.prototype对象中的toString方法的上下文 Object.prototype.toString.call(arr); //"[object …

js中toString与Object.prototype.toString有何不同 2019年10月11日
;

1.查看版本 console.log(moment.version); 2. moment().format(‘YYYY-MM-DD’) // 当前日期:2019-10-13 moment().subtract(7, ‘d’).format(‘YYYY-MM-DD’) // 七天前:2019-10-06 moment().add(1, ‘d’).date() // 明天日期:14 moment().format(‘MM月DD日’) // 当前月日:10月13日

moment.js处理时间 2019年10月7日
;

如何让web页面更快,雅虎团队实践总结了7类35条规则,下面一一列出。 雅虎前端优化35条规则翻译 1. Content 1.1 Make Fewer HTTP Requests Minimize HTTP Requests减少/最小化 http 请求数。 到终端用户的响应时间80%花在前端:大部分用于下载组件(js/css/image/flash等等)。减少组件数就是减少渲染页面所需的http请求数。这是更快页面的关键。 减少组件数的一个方法就是简化页面设计。保持富内容的页面且能减少http请求,有以下几个技术: Combined files。合并文件,如合并js,合并css都能减少请求数。如果页面间脚本和样式差异很大,合并会更具挑战性。 CSS Sprites。雪碧图可以合并多个背景图片,通过background-image 和 background-position 来显示不同部分。 Image maps。合并多个图片到一个图片,一般用于如导航条。由于定义坐标的枯燥和易错,一般不推荐。 Inline images。使用data:url scheme来內连图片。 减少请求数是为第一次访问页面的用户提高性能的最重要的指导。 1.2 Reduce DNS Lookups 减少DNS查询。 就像电话簿,你在浏览器地址栏输入网址,通过DNS查询得…

雅虎前端优化35条规则 2019年10月1日
;

1.问题描述 代码调试,在ajax一返回立马打印,发现结果竟然是后续处理过后的 2.伪代码复现 var array = [1,2]; var obj = { a: 1, b: [1,2] } console.log(array); //[1, 2] 误,外部显示的[1, 2],点开箭头显示的[1,2,3] console.log(obj); //{a:1,b:[1,2,3]} array.push(3); obj.b.push(3); console.log(array); //[1,2,3] console.log(obj); //{a:1,b:[1,2,3]} 更正:打印结果中带三角箭头的地方需要展开查看最终结果,外部显示可能并不一致 3.产生原因 对象保存的是地址,引用同一片内存空间,后面发生改变,也会影响打印出来的值。 但凡是有个箭头出来的,可以认为是一个对象了,所以数值是实时的。三角形点开的时候才会拿着内存地址去取对象的值。 而你查看的时候,对象里的内容已经被改过了。所以这个直接log 对象或者数组的方式,并不能很好的体现内部值的一个实时性。 4.猜想 把push放入setTimeout延时5秒会怎样? var array = [1,2]; var obj = { a: 1, b: [1,2] } console.log(array…

console打印数据,发现打印结果并非初始ajax返回的值 2019年9月25日
;

一、逻辑运算符 &&(短路与) 特点:只要碰到了false或者等价于false的就短路,只要短路了就不会继续往后执行了。如果短路了,得到造成短路的这个值,如果不短路,得到的是第二个值 console.log( true && true ); // true console.log( 123 && ‘中国’); // 中国 console.log( false && true ); // false console.log( true && false); // false console.log(1 && 0); // 0 console.log( undefined && 0); // undefined console.log(null && 1); // null 二、逻辑运算符 || (短路或) 特点:只要碰到了true或者等价于true的就短路,只要短路了就不会继续往后执行了。如果短路了,得到造成短路的这个值,如果不短路,得到的是第二个值 console.log( true || true ); // true console.log( 123 || ‘中国’); // 123 console.log(…

短路运算 &&和|| 2019年9月2日
;

This can be done using CSS transforms 1) For 12 equal slices, each slice angle will be 30 degrees. 2) We need to rotate each slice according to the angle between vertical axis and start of the slice. So the first slice will be rotated by 0deg and the last by 330deg 3) Additionally we need to skew each slice by minus (90deg – slice angle) In this case, it is -(90deg – 30deg) = skewY(-60deg) 4) Regarding the text: a) We need to unskew slice contents with skewY(60deg) b) In order to center the text in the slice we need to rotate it by half the slice angle, hence: r…

通过css如何等分一个圆? 2019年8月2日
;

let a1 = [ {id: 1,text: ”}, {id: 2,text: ”}, {id: 3,text: ”}, {id: 4,text: ”}, {id: 5,text: ”}, {id: 6,text: ”}, {id: 7,text: ”}, ] let a2 = [ {id: 1,text: ”}, {id: 2,text: ”}, {id: 3,text: ”} ] let a3 = [ {id: 3,text: ”}, {id: 4,text: ”}, {id: 5,text: ”}, ] let result = difObjectArray(a1, a2, a3) console.log(result) function difObjectArray (a1, a2, a3) { // 获取a1中不包含a2,a3的元素,a1,a2,a3所包含的字段可能不同,但都包含id // 取出各个数组的id let a1_key = a1.map((item) =>item.id) let a2_key = a2.map((item) =>item.id) let a3_key = a3.map((item) =>item.id) // 合并a2,a3 let concat = []….

多个对象数组求差值 2019年7月22日
;

1.问题描述 默认情况下,dispatchEvent只触发定义在目标上以及捕获阶段的事件 var event = new Event(‘eventName’); document.body.addEventListener(‘eventName’,function(){ alert(‘body’); }); document.addEventListener(‘eventName’,function(){ alert(‘document’); }); window.addEventListener(‘eventName’,function(){ alert(‘window’); },true); document.body.dispatchEvent(event); 此时,body和window会触发,document上的事件处于冒泡阶段并没有触发 2.解决,事件定义时候加入第二个参数 var event = new Event(‘eventName’,{ bubbles: true }); // 加入第二个参数 document.body.addEventListener(‘eventName’,function(){ alert(‘body’); }); document.addEventListener(‘eventName’,func…

dispatchEvent如何触发冒泡 2019年6月16日
;

在JavaScript中,有时候需要在一个不同的对象上重用一个函数,而不是在定义它的对象或者原型中。通过使用call(),applay()和bind(),我们可以很方便地从不同的对象借用方法,而不需要继承它们 – 这是一个在专业JavaScript开发者的工具箱中很有用的工具。 先决条件 这篇文章假设你已经充分了解了call(),apply() 和 bind() 以及它们的不同点。 来自原生prototypes的方法 在JavaScript中,你接触的几乎所有东西都是一个对象,除了string,number 和 booleans这样不可变的原始值。一个数组是一种对象类型,适合用于有序数据列表的遍历和修改,在它的原型中有很多有用的方法,例如slice,join,push 和 pop。 我们看到对象最常见的使用情况就是从一个数组中借用方法,因为它们都是列表类型的数据结构。最常被借用的方法是 Array.prototype.slice。 function myFunc() { // 错误, arguments是一个类数组对象, 不是一个真实的数组 arguments.sort(); // 借用 Array 原型中的方法 slice, 它接受一个类数组对象 (key:value) // 并返回一个真实的数组 var args = Array.prot…

在JavaScript中借用方法 2019年6月5日
;

1.问题描述 ajax请求同源请跨下会携带cookie一旦跨域就没有了cookie

ajax cors跨域携带cookie 2019年4月11日
;

dom2事件优点 1.It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used. 一个事件可以注册多个监听器 2.It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling) 更精细的手段控制事件监听器的触发阶段 3.It works on any DOM element, not just HTML elements. 对任何dom元素有效不仅仅是html元素 0级DOM分为2个: 一是在标签内写onclick事件 <input id="myButton" type="button" value="Press Me" onclick="alert(‘thanks’);" > 二…

addEventListener和onclick的区别,dom0与dom2 2019年3月29日
;

关键点:饼图传入两份数据,一份设置label在外显示,一份在内显示,设置不同信息,位置叠加 /*饼图:项目状态*/ var myChart = echarts.init(document.getElementById(‘echarts-pie’)); // 指定图表的配置项和数据 var option = { title : { text: ‘项目状态’, x:’center’ }, color:[‘#477dea’, ‘#9a9a9a’,’#f2b644′], tooltip : { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" }, normal:{ show: true, position: ‘inside’, formatter: ‘{d}%’ }, legend: { orient: ‘vertical’, left: ‘left’, data: [‘已签单’,’实施中’,’已完成’] }, series : [ { name: ”, type: ‘pie’, radius: ‘55%’, center: [‘50%’, ‘50%’], data:[ {value:335, name:’已签单’}, {value:310, name:…

echarts饼图同时显示指示线和百分比 2019年3月12日
;

stack相同的数据会在Y轴叠加。 如果是相同的值,则会叠加在一起。取不同的值,Y轴的数据就不会叠加在一起; 或者删除掉,默认为不叠加。

echart折线图不叠加 2019年3月12日
;

title: { text: ‘天气情况统计’, //标题 subtext: ‘虚构数据’, //副标题 left: ‘center’ //标题位置 }, tooltip: { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移上去显示的内容 }, normal: { show: true, position: ‘inside’, //图形里显示(比如在饼图块上显示百分比) formatter: ‘{d}%’ //显示的内容 }, textStyle: { fontWeight: ‘normal’, //显示字体粗细等 fontSize: 10 }, legend: { //图例 // top: ‘middle’, // bottom: 10, // left: ‘center’, icon: "circle", //圆点形图例(默认是官网上的圆角矩形) itemWidth: 10, //这几个是图例宽高位置等的设置 itemHeight: 10, itemGap: 20, left: 100, top: 110, bottom: 20, textStyle: { // fontSize: 5 color: "…

echart:配置注释 2019年3月12日
;

1.问题描述 父元素设置display:flex,此时两个子元素无论如何设置都会放置在一行中

父元素设置flex后会导致子元素换行失效 2019年3月9日
;

1.原因分析 因为容器在初始化时被设置成display:none; 2.解决方案 元素隐藏通过设置opacity: 0来实现

swiper报错‘Cannot read property ‘indexOf’ of undefined swiper’ 2019年3月9日
;

1,父容器需要设置高度才能生效。

css设置calc不生效 2019年3月9日
;

画布的大小是根据background属性所传的图片尺寸决定的

mcanvas.js中画布大小如何设置 2019年3月8日
;

1.原因 每次调用都会产生不同的ID,单次调用clearInterval并不能全部清除 2.解决方案 每次调用setInterval后,将ID存入一个数组,然后需要清除时候,遍历数组进行清除 3.相关代码 let id= setInterval(() => {}, 1000) this.idList.push(id) for (let i = 0; i < this.idList.length; i++) { clearInterval(this.timerId[i]) }

setInterval多次调用后,clearInterval无效 2019年2月28日
;

问题原因: img标签为行内元素(inline),默认对其方式为vertical-align: baseline(基线对齐) 四种解决方法: 1.将img设置为block,这样就不再受行内基线的影响。 2.设置img的竖直对齐方式v-align:bottom。 3.设置父div的font-size,需要一个较大的值,原理未知。 4.设置外层的div的line-height:0,这样基线下方的位置基本可以忽略。

div中包含img标签,下方出现空白 2019年2月21日