自创解法！setTimeout+Promise+Async输出顺序？简单的一匹！！

前言

大家好，我是林三心，有关于EventLoop的知识点，在平时是考的非常多的，其实也跟我们日常的工作时息息相关的，懂得EventLoop的执行顺序，可以大大帮助我们定位出问题出在哪。其实正常的EventLoop顺序是很容易分辨的，但是如果setTimeout + Promise + async/await联起手来是非常棘手的。今天我就带大家过五关斩六将，征服他们！！！

注明：本文不涉及Nodejs执行机制

同步 && 异步

什么是异步，什么是同步，我不多说，我就通过小故事来讲讲吧。

  • 同步：你打电话去书店订书，老板说我查查，你不挂电话在等待，老板把查到的结果告诉你，这期间你不能做自己的事情
  • 异步：你打电话去书店订书，老板说我查查，回头告诉你，你把电话挂了，先去做自己的事情

JS执行机制

其实不难，JavaScript代码执行机制，我就归结为三句话

  • 1、遇到同步代码直接执行
  • 2、遇到异步代码先放一边，并且将他回调函数存起来，存的地方叫事件队列
  • 3、等所有同步代码都执行完，再从事件队列中把存起来的所有异步回调函数拿出来按顺序执行

自创解法！setTimeout+Promise+Async输出顺序？简单的一匹！！_第1张图片

请看以下例子

console.log(1) // 同步
setTimeout(() => {
  console.log(2) // 异步
}, 2000);
console.log(3) // 同步
setTimeout(() => {
  console.log(4) // 异步
}, 0);
console.log(5) // 同步

输出 ： 1 3 5 4 2

自创解法！setTimeout+Promise+Async输出顺序？简单的一匹！！_第2张图片

宏任务 && 微任务

前面说了，等所有同步代码都执行完，再从事件队列里依次执行所有异步回调函数。

其实事件队列也是一个小团体，人家也有自己的规则，这就类似于学校管理着许多社团，人家自己社团内部也有人家自己的规矩。

话说回来，为什么事件队列里需要有自己的规则呢？要不你先想想为什么学校里的社团里要有自己的规则要分等级，是因为有的人能力强有的人能力弱，所以也就有了等级的高低。其实事件队列也一样，事件队列是用来存异步回调的，但是异步也分类型啊，异步任务分为宏任务和微任务，并且微任务执行时机先于宏任务

那宏任务和微任务都分别有哪些呢？

宏任务

# 浏览器 Node
I/O ✅ ✅
setTimeout ✅ ✅
setInterval ✅ ✅
setImmediate ❌ ✅
requestAnimationFrame ✅ ❌

微任务

# 浏览器 Node
Promise.prototype.then catch finally ✅ ✅
process.nextTick ❌ ✅
MutationObserver ✅ ❌

执行流程

那就来说说整体的执行的流程吧

自创解法！setTimeout+Promise+Async输出顺序？简单的一匹！！_第3张图片

例子

大家可以根据我的解题步骤去走，基本90%的题目都是没什么压力的！！！

  • 1、标记区分异步和同步
  • 2、异步中，标记区分宏任务和微任务
  • 3、分轮数，一轮一轮慢慢走
console.log(1) // 同步
setTimeout(() => {
  console.log(2) // 异步：宏任务
});
console.log(3) // 同步
Promise.resolve().then(()=>{ // 异步：微任务
  console.log(4) 
})
console.log(5) // 同步

第一轮

  • 说明：先把同步的执行输出
  • 输出：1，3，5
  • 产生宏任务：setTimeout，产生微任务：Promise.prototype.then

第二轮

  • 说明：微任务先执行
  • 输出：4
  • 产生宏任务：无，产生微任务：无
  • 剩余宏任务：setTimeout，剩余微任务：无

第三轮(结束)

  • 说明：执行宏任务
  • 输出：2
  • 产生宏任务：无，产生微任务：无
  • 剩余宏任务：无，剩余微任务：无

第一关

想一想我刚刚说的解题思路，大家可以按照那个思路来，这道题也就是分分钟的事情啦

console.log(1)
setTimeout(() => {
  console.log(2)
  Promise.resolve().then(() => {
    console.log(3)
  })
});
console.log(4)
new Promise((resolve,reject) => {
  console.log(5)
}).then(() => {
  console.log(6)
  setTimeout(() => {
    console.log(7)
  })
})
console.log(8)

第一步：标记

注意：Promise的 executor是同步的哦！！！ 
console.log(1) // 同步
setTimeout(() => {
  console.log(2) // 异步：宏任务 setTimeout1
  Promise.resolve().then(() => { // 异步：微任务 then1
    console.log(3)
  })
});
console.log(4) // 同步
new Promise((resolve,reject) => {
  console.log(5) // 同步
  resolve()
}).then(() => { // 异步：微任务 then2
  console.log(6)
  setTimeout(() => {
    console.log(7) // 异步：宏任务 setTimeout2
  })
})
console.log(8) // 同步

第二步：分轮

轮数 说明 输出 产生 剩余
第一轮 执行外层同步输出 1，4，5，8 宏任务：setTimeout1
微任务：then2		 宏任务：setTimeout1
微任务：then2
第二轮 执行微任务then2 6 宏任务：setTimeout2
微任务：无		 宏任务：setTimeout1，setTimeout2
微任务：无
第三轮 执行宏任务setTimeout1 2 宏任务：无
微任务：then1		 宏任务：setTimeout2
微任务：then1
第四轮 执行微任务then1 3 宏任务：无
微任务：无		 宏任务：setTimeout2
微任务：无
第五轮 执行宏任务setTimeout2 7 宏任务：无
微任务：无		 宏任务：无
微任务：无

第二关

大家在遇到Promise.then.then这种时，如果有点懵逼的同学，可以转换一下，下面会说到

注意： then方法会自动返回一个新的 Promise，也就是 return new Promise，具体的 Promise源码，大家可以看我这篇 看了就会，手写Promise原理，最通俗易懂的版本【阅读：1.1w，点赞：430】 
setTimeout(() => {
  console.log(1)
}, 0)
console.log(2)
const p = new Promise((resolve) => {
  console.log(3)
  resolve()
}).then(() => {
  console.log(4)
}).then(() => {
  console.log(5)
})
console.log(6)

第一步：标记 + 转换

注意：这里的转换，只针对做题时，比较好理解，平时不要这么转换，平时这么转换是不太合适的，是错的 
setTimeout(() => { // 异步：宏任务 setTimeout
  console.log(1)
}, 0)
console.log(2) // 同步
const p = new Promise((resolve) => { // p 是 then1 执行返回的新 Promise
  console.log(3) // 同步
  resolve()
}).then(() => { // 异步：微任务 then1
  console.log(4)
  // 拿着 p 重新 then
  p.then(() => { // 异步：微任务 then2
    console.log(5)
  })
})
console.log(6) // 同步 6

第二步：分轮

轮数 说明 输出 产生 剩余
第一轮 执行同步输出 2，3，6 宏任务：setTimeout
微任务：then1		 宏任务：setTimeout
微任务：then1
第二轮 执行微任务then1 4 宏任务：无
微任务：then2		 宏任务：setTimeout
微任务：then2
第三轮 执行微任务then2 5 宏任务：无
微任务：无		 宏任务：setTimeout
微任务：无
第四轮 执行宏任务setTimeout 1 宏任务：无
微任务：无		 宏任务：无
微任务：无

第三关

再说一遍：大家在遇到Promise.then.then这种时，如果有点懵逼的同学，可以转换一下

注意： then方法会自动返回一个新的 Promise，也就是 return new Promise，具体的 Promise源码，大家可以看我这篇 看了就会，手写Promise原理，最通俗易懂的版本【阅读：1.1w，点赞：430】 
new Promise((resolve,reject)=>{
  console.log(1)
  resolve()
}).then(()=>{
  console.log(2)
  new Promise((resolve,reject)=>{
      console.log(3)
      resolve()
  }).then(()=>{
      console.log(4)
  }).then(()=>{
      console.log(5)
  })
}).then(()=>{
  console.log(6)
})

第一步：标记 + 转换

注意：这里的转换，只针对做题时，比较好理解，平时不要这么转换，平时这么转换是不太合适的，是错的 
const p1 = new Promise((resolve, reject) => { // p1 是 then1 执行返回的新 Promise
  console.log(1) // 同步
  resolve()
}).then(() => { // 异步：微任务 then1
  console.log(2)
  const p2 = new Promise((resolve, reject) => { // p2 是 then2 执行返回的新 Promise
    console.log(3) // then1 里的 同步
    resolve()
  }).then(() => { // 异步：微任务 then2
    console.log(4)
    
    // 拿着 p2 重新 then
    p2.then(() => { // 异步：微任务 then3
      console.log(5)
    })
  })
  
  // 拿着 p1 重新 then
  p1.then(() => { // 异步：微任务 then4
    console.log(6)
  })
})

第二步：分轮

轮数 说明 输出 产生 剩余
第一轮 执行外层同步输出 1 宏任务：无
微任务：then1		 宏任务：无
微任务：then1
第二轮 执行微任务then1 2，3 宏任务：无
微任务：then2、then4		 宏任务：无
微任务：then2、then4
第三轮 执行微任务then2，then4 4，6 宏任务：无
微任务：then3		 宏任务：无
微任务：then3
第四轮 执行微任务then3 5 宏任务：无
微任务：无		 宏任务：无
微任务：无

第四关

这一关，比上一关多了一个return

前面说了，then方法会自动返回一个新的Promise，相当于return new Promise，但是如果你手动写了return Promise，那return的就是你手动写的这个Promise

new Promise((resolve, reject) => {
  console.log(1)
  resolve()
}).then(() => {
  console.log(2)
  // 多了个return
  return new Promise((resolve, reject) => {
    console.log(3)
    resolve()
  }).then(() => {
    console.log(4)
  }).then(() => { // 相当于return了这个then的执行返回Promise
    console.log(5)
  })
}).then(() => {
  console.log(6)
})

第一步：标记 + 转换

由于return的是then3执行返回的Promise，所以then4其实是then3Promise.then()，所以可转换为then3.then4

new Promise((resolve, reject) => {
  console.log(1) // 同步
  resolve()
}).then(() => { // 异步：微任务 then1
  console.log(2) // then1 中的 同步
  new Promise((resolve, reject) => {
    console.log(3) // then1 中的 同步
    resolve()
  }).then(() => { // 异步：微任务 then2
    console.log(4)
  }).then(() => { // 异步：微任务 then3
    console.log(5)
  }).then(() => { // 异步：微任务 then4
    console.log(6)
  })
})

第二步：分轮

轮数 说明 输出 产生 剩余
第一轮 执行外层同步输出 1 宏任务：无
微任务：then1		 宏任务：无
微任务：then1
第二轮 执行微任务then1 2，3 宏任务：无
微任务：then2、then3、then4		 宏任务：无
微任务：then2、then3、then4
第三轮 执行微任务then2、then3、then4 4，5，6 宏任务：无
微任务：无		 宏任务：无
微任务：无

第五关

new Promise((resolve, reject) => {
  console.log(1)
  resolve()
}).then(() => {
  console.log(2)
  new Promise((resolve, reject) => {
    console.log(3)
    resolve()
  }).then(() => {
    console.log(4)
  }).then(() => {
    console.log(5)
  })
}).then(() => {
  console.log(6)
})
new Promise((resolve, reject) => {
  console.log(7)
  resolve()
}).then(() => {
  console.log(8)
})

第一步：标记 + 转换

const p1 = new Promise((resolve, reject) => { // p1 是 then1 执行返回的新 Promise
  console.log(1) // 同步
  resolve()
}).then(() => { // 异步：微任务 then1
  console.log(2)
  const p2 = new Promise((resolve, reject) => { // p2 是 then2 执行返回的新 Promise
    console.log(3) // then1 里的 同步
    resolve()
  }).then(() => { // 异步：微任务 then2
    console.log(4)
    
    // 拿着 p2 重新 then
    p2.then(() => { // 异步：微任务 then3
      console.log(5)
    })
  })
  
  // 拿着 p1 重新 then
  p1.then(() => { // 异步：微任务 then4
    console.log(6)
  })
})

new Promise((resolve, reject) => {
  console.log(7) // 同步
  resolve()
}).then(() => {  // 异步：微任务 then5
  console.log(8)
})

第二步：分轮

轮数 说明 输出 产生 剩余
第一轮 执行外层同步输出 1，7 宏任务：无
微任务：then1、then5		 宏任务：无
微任务：then1、then5
第二轮 执行微任务then1、then5 2，3，8 宏任务：无
微任务：then2、then4		 宏任务：无
微任务：then2、then4
第三轮 执行微任务then2、then4 4，6 宏任务：无
微任务：then5		 宏任务：无
微任务：then5
第四轮 执行微任务then5 5 宏任务：无
微任务：无		 宏任务：无
微任务：无

第六关

其实async/await的内部实现原理，是依赖于Promise.prototype.then的不断嵌套，它在题中也是可以转换的，下面会讲到。

有兴趣的朋友可以看我这篇 7张图，20分钟就能搞定的async/await原理！为什么要拖那么久【阅读量：1.8w，点赞：571】 
async function async1() {
  console.log(1);
  await async2();
  console.log(2);
}
async function async2() {
  console.log(3);
}
console.log(4);
setTimeout(function () {
  console.log(5);
});
async1()
new Promise(function (resolve, reject) {
  console.log(6);
  resolve();
}).then(function () {
  console.log(7);
});
console.log(8);

第一步：标记 + 转换

注意：这里的转换，只针对做题时，比较好理解，平时不要这么转换，平时这么转换是不太合适的 
console.log(4); // 同步
setTimeout(function () {
  console.log(5); // 异步：宏任务 setTimeout
});

// async1函数可转换成
console.log(1) // 同步
new Promise((resolve, reject) => {
  console.log(3) // 同步
  resolve()
}).then(() => { // 异步：微任务 then1
  console.log(2)
})
// async1函数结束

new Promise(function (resolve, reject) {
  console.log(6); // 同步
  resolve();
}).then(function () { // 异步：微任务 then2
  console.log(7);
});
console.log(8); // 同步

第二步：分轮

轮数 说明 输出 产生 剩余
第一轮 执行同步输出 4，1，3，6，8 宏任务：setTimeout
微任务：then1、then2		 宏任务：setTimeout
微任务：then1、then2
第二轮 执行微任务then1、then2 2，7 宏任务：无
微任务：无		 宏任务：setTimeout
微任务：无
第三轮 执行宏任务setTimeout 5 宏任务：无
微任务：then5		 宏任务：无
微任务：无

课后作业

最后给大家布置两道作业，帮大家巩固一下本文章所学的知识，大家也可以加入我的摸鱼群，进行答案的讨论。进群点击这里[进群](
https://juejin.cn/pin/6969565...)，目前已有将近1000人加入学习，我会定时举办学习分享，模拟面试等学习活动，一起学习，共同进步！！！

第一题（思考题）

想一想下面这两个有什么区别？

// 第一种
const p = new Promise((resolve, reject) => {
  resolve()
}).then(() => console.log(1)).then(() => console.log(2))

// 第二种
const p = new Promise((resolve, reject) => {
  resolve()
})
p.then(() => console.log(1))
p.then(() => console.log(2))

第二题（问题不大）

async function async1() {
  console.log(1);
  await async2();
  console.log(2);
}
async function async2() {
  console.log(3);
}

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
    console.log(4)
  }, 1000);
}).then(() => {
  console.log(5)
  new Promise((resolve, reject) => {
    setTimeout(() => {
      async1()
      resolve()
      console.log(6)
    }, 1000)
  }).then(() => {
    console.log(7)
  }).then(() => {
    console.log(8)
  })
}).then(() => {
  console.log(9)
})
new Promise((resolve, reject) => {
  console.log(10)
  setTimeout(() => {
    resolve()
    console.log(11)
  }, 3000);
}).then(() => {
  console.log(12)
})

第三题（有点难度）

这道题能一分钟内做出来的找我领奖，这道题需要具备一定的Promise原理基础 + async/await原理基础才能比较轻松的答对，有兴趣的同学可以看我之前写过的文章

  • 看了就会，手写Promise原理，最通俗易懂的版本【阅读：1.1w，点赞：430】

  • 7张图，20分钟就能搞定的async/await原理！为什么要拖那么久【阅读量：1.8w，点赞：571】

    async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}

async function async2() {
console.log('async start')
return new Promise((resolve, reject) => {
  resolve()
  console.log('async2 promise')
})
}

console.log('script start')
setTimeout(() => {
console.log('setTimeout')
}, 0);

async1()

new Promise((resolve) => {
console.log('promise1')
resolve()
}).then(() => {
console.log('promise2')
}).then(() => {
console.log('promise3')
})
console.log('script end')

    结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。或者可以加入我的摸鱼群（看我资料）

自创解法！setTimeout+Promise+Async输出顺序？简单的一匹！！_第4张图片

你可能感兴趣的:(javascript前端面试)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他