22道js输出顺序问题,你能做出几道

前言

最近在准备面试题，console的输出顺序之前一直迷迷糊糊。

必备知识

JS是单线程的

单线程是 JavaScript 核心特征之一。这意味着，在 JS 中所有任务都需要排队执行，前一个任务结束，才会执行后一个任务。
所以这就造成了一个问题：如果前一个任务耗时很长，后一个任务就不得不一直等着前面的任务执行完才能执行。比如我们向服务器请求一段数据，由于网络问题，可能需要等待 60 秒左右才能成功返回数据，此时只能等待请求完成，JS 才能去处理后面的代码。

同步任务和异步任务

为了解决JS单线程带来的问题，JavaScript 就将所有任务分成了同步任务和异步任务。

同步任务（Synchronous）

同步任务指的是当前一个（如果有）任务执行完毕，接下来可以立即执行的任务。这些任务将在主线程上依次排队执行。也就是说排排队

//for(){} 和 console.log() 将会依次执行，最终输出 0 1 2 3 4 done。
for (let i = 0; i < 5; i++) {
console.log(i)
}
console.log('done')
异步任务（Asynchronous）

异步任务相对于同步任务，指的是不需要进入主线程排队执行，而是进入超车道、并车道。也就是任务队列中，形成一系列的任务。这些任务只有当被通知可以执行的时候，该任务才会重新进入主线程执行。

//下面的 then() 方法需要等待 Promise 被 resolve() 之后才能执行，它是一个异步任务。最终输出 1 3 2。
console.log(1)

Promise.resolve().then(() => {
  console.log(2)
})

console.log(3)

具体来说就是，所有同步任务会在主线程上依次排队执行，形成一个执行栈（Execution Context
Stack）。主线程之外，还存在一个任务队列。当异步任务有了运行结果，会在任务队列之中放置对应的事件。当执行栈中的所有同步任务执行完毕，任务队列里的异步任务就会进入执行栈，然后继续依次执行。

异步任务(任务队列)可以分为

  • macrotasks（taskQueue）：宏任务 task，也是我们常说的任务队列

    • macrotasks 的划分：（注意先后顺序！）

      • （1）setTimeout（延迟调用）
      • （2）setInterval（间歇调用）
      • （3）setImmediate（Node 的立即调用）
      • （4）requestAnimationFrame（高频的 RAF）
      • （5）I/O（I/O 操作）
      • （6）UI rendering（UI 渲染）
      • (7) 包裹在一个 script 标签中的 js 代码也是一个 Macrotasks

注意： （1）每一个 macrotask 的回调函数要放在下一车的开头去执行！ （2）只有 setImmediate 能够确保在下一轮事件循环立即得到处理

  • microtasks：微任务（也称 job）调度在当前脚本执行结束后，立即执行的任务，以避免付出额外一个 task 的费用。

    • microtasks ：（注意先后顺序！）

      • （1）process.nextTick（Node 中 定义出一个动作，并且让这个动作在下一个事件轮询的时间点上执行）
      • （2）Promises（详情看这篇文章：www.jianshu.com/p/06d16ce41…
      • （3）Object.observe（原生观察者实现，已废弃）
      • （4）MutationObserver（监听 DOM change） 只有在 nextTick 空了才处理其它 microtask。（Next tick queue has even higher priority
        over the Other Micro tasks queue.）

一个事件循环（eventLoop）的执行顺序（非常重要）：

  • ① 开始执行脚本。
  • ② 取 macrotasks（taskQueue）中的第一个 task 执行，该 task 的回调函数 放在下一个 task 开头 执行。
  • ③ 取 microtasks 中的全部 microtask 依次执行，当这些 microtask 执行结束后，可继续添加 microtask 继续执行，直到 microtask 队列为空。
  • ④ 取 macrotasks（taskQueue）中的第二个 task 执行，该 task 的回调函数 放在下一个 task 开头 执行。
  • ⑤ 再取 microtasks 中的全部 microtask 依次执行，当这些 microtask 执行结束后，可继续添加 microtask 继续执行，直到 microtask 队列为空。
  • ⑥ 循环 ② ③ 直到 macrotasks、microtasks 为空。

Promise 之所以无法使用 catch 捕获 setTimeout 回调中的错误，是因为 Promise 的 then/catch 是在 setTimeout 之前执行的。

事件循环的顺序，决定了 JavaScript 代码的执行顺序。它从 script (整体代码) 开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空 (只剩全局)，然后执行所有的 microtasks。当所有可执行的
microtasks 执行完毕之后。循环再次从 macrotasks 开始，找到其中一个任务队列执行完毕，然后再执行所有的 microtasks，这样一直循环下去。

翻译过来就是，先执行 Microtasks queue 中的所有 Microtasks，再挑一个 Macrotasks queue 来执行其中所有 Macrotasks，然后继续执行 Microtasks queue 中的所有
Microtasks，再挑一个 Macrotasks queue 来执行其中所有 Macrotasks ……

这也就解释了，为什么同一个事件循环中的 Microtasks 会比 Macrotasks 先执行。

练习题

练习题做题的依据就是以下图为主，注意要点宏任务是在下一次才执行呢，本次有微任务需要先执行，随后参考下图

22道js输出顺序问题,你能做出几道_第1张图片

习题1

console.log(1)
setTimeout(()=>{
    console.log(2)
},0)
process.nextTick(()=>{
    console.log(3)
})
new Promise((resolve)=>{
    console.log(4)
    resolve()
}).then(()=>{
    console.log(5)
})

习题1解析

第一轮事件循环

主流程 Macro event queue Micro event queue
console.log(1) setTimeout process
console.log(4) then
  1. 首先执行同步任务，按出现顺序，输出 1
  2. 遇到 setTimeout，放入Macro event queue
  3. 遇到 process，放入 Micro event queue
  4. 遇到 promise，先立即执行，输出 4，并将 then 回调放入 Micro event queue
  5. 然后看 Micro event queue，逐个执行，输出 3， 输出 5
  6. 第一轮 Event Loop 执行结束

第二轮事件循环

主流程 Macro event queue Micro event queue
setTimeout
  1. 取出 Macro event queue 第一个放入主流程执行
  2. 输出 2
  3. Micro event queue 没有任务
  4. 第二轮 Event Loop 执行结束

习题2

console.log(1)
setTimeout(() => {
    console.log(2)
}, 0)
process.nextTick(() => {
    console.log(3)
})
new Promise((resolve) => {
    console.log(4)
    resolve()
}).then(() => {
    console.log(5)
})
setTimeout(() => {
    console.log(6)
}, 0)
new Promise((resolve) => {
    console.log(7)
    setTimeout(() => {
        console.log(8)
        resolve()
    }, 0)
}).then(() => {
    console.log(9)
    setTimeout(() => {
        console.log(10)
        new Promise((resolve) => {
            console.log(11)
            resolve()
        }).then(() => {
            console.log(12)
        })
    }, 0)
})
// 1, 4, 7, 3, 5, 2, 6, 8, 9, 10, 11, 12

习题2解析

第一轮事件循环

主流程 Macro event queue Micro event queue
console.log(1) setTimeout2 process3
console.log(4) setTimeout6 then5
console.log(7) setTimeout8
  1. 主流程输出：1， 4， 7
  2. 执行第一个 Micro event queue：输出 3
  3. 第二个 Micro event queue：输出 5
  4. Micro event queue 清空，第一轮执行完毕

第二轮事件循环

主流程 Macro event queue Micro event queue
setTimeout2 setTimeout6
setTimeout8
  1. 主流程输出 2
  2. Micro event queue 为空，第二轮执行完毕

第三轮事件循环

主流程 Macro event queue Micro event queue
setTimeout6 setTimeout8
  1. 主流程输出 6
  2. 第三轮执行完毕

第四轮事件循环

主流程 Macro event queue Micro event queue
setTimeout9 setTimeout10 then9
  1. 注意，这里执行输出 8 后，resolve，这时才向 Micro event queue 压入 then 回调
  2. 执行 then9 回调，输出 9
  3. 又有新的 setTimeout，压入 Macro event queue
  4. 这轮循环没有东西可执行，结束

第五轮事件循环

主流程 Macro event queue Micro event queue
console.log(10) then12
console.log(11)
  1. 第五轮，setTimeout10 进入主流程，输出 10
  2. 遇到 promise，输出 11
  3. resolve， 压入 then 到 Micro event queue
  4. 取出 Micro event queue 执行，输出 12

习题3

// 以下代码在 Node 环境运行：process.nextTick 由 Node 提供
console.log("1")
setTimeout(function () {
  console.log("2")
  process.nextTick(function () {
    console.log("3")
  })
  new Promise(function (resolve) {
    console.log("4")
    resolve()
  }).then(function () {
    console.log("5")
  })
})

process.nextTick(function () {
  console.log("6")
})

new Promise(function (resolve) {
  console.log("7")
  resolve()
}).then(function () {
  console.log("8")
})

setTimeout(function () {
  console.log("9")
  process.nextTick(function () {
    console.log("10")
  })
  new Promise(function (resolve) {
    console.log("11")
    resolve()
  }).then(function () {
    console.log("12")
  })
})

// 最终输出：1 7 6 8 2 4 3 5 9 11 10 12

习题4

setTimeout(()=>{
    console.log("setTimeout1");
    Promise.resolve().then(data => {
        console.log(222);
    });
},0);
setTimeout(()=>{
    console.log("setTimeout2");
},0);
Promise.resolve().then(data=>{
    console.log(111);
});
//111 setTimeout1 222 setTimeout2

习题4解析

  1. 主线程上没有需要执行的代码
  2. 接着遇到setTimeout 0，它的作用是在 0ms 后将回调函数放到宏任务队列中(这个任务在下一次的事件循环中执行)。
  3. 接着遇到setTimeout 0，它的作用是在 0ms 后将回调函数放到宏任务队列中(这个任务在再下一次的事件循环中执行)。
  4. 首先检查微任务队列, 即 microtask队列，发现此队列不为空，执行第一个promise的then回调，输出 '111'。
  5. 此时microtask队列为空，进入下一个事件循环, 检查宏任务队列，发现有 setTimeout的回调函数，立即执行回调函数输出 'setTimeout1',检查microtask
    队列，发现队列不为空，执行promise的then回调，输出'222'，microtask队列为空，进入下一个事件循环。
  6. 检查宏任务队列，发现有 setTimeout的回调函数, 立即执行回调函数输出'setTimeout2'。参考： 前端进阶面试题详细解答

习题5

console.log('script start');

setTimeout(function () {
    console.log('setTimeout---0');
}, 0);

setTimeout(function () {
    console.log('setTimeout---200');
    setTimeout(function () {
        console.log('inner-setTimeout---0');
    });
    Promise.resolve().then(function () {
        console.log('promise5');
    });
}, 200);

Promise.resolve().then(function () {
    console.log('promise1');
}).then(function () {
    console.log('promise2');
});
Promise.resolve().then(function () {
    console.log('promise3');
});
console.log('script end');
/*script startscript endpromise1promise3promise2setTimeout---0setTimeout---200promise5inner-setTimeout---0*/

习题5解析

  1. 首先顺序执行完主进程上的同步任务，第一句和最后一句的console.log
  2. 接着遇到setTimeout 0，它的作用是在 0ms 后将回调函数放到宏任务队列中(这个任务在下一次的事件循环中执行)。
  3. 接着遇到setTimeout 200，它的作用是在 200ms 后将回调函数放到宏任务队列中(这个任务在再下一次的事件循环中执行)。
  4. 同步任务执行完之后，首先检查微任务队列, 即 microtask队列，发现此队列不为空，执行第一个promise的then回调，输出 'promise1'，然后执行第二个promise的then回调，输出'
    promise3'，由于第一个promise的.then()的返回依然是promise，所以第二个.then()会放到microtask队列继续执行，输出 'promise2';
  5. 此时microtask队列为空，进入下一个事件循环, 检查宏任务队列，发现有 setTimeout的回调函数，立即执行回调函数输出 'setTimeout---0',检查microtask 队列，队列为空，进入下一次事件循环.
  6. 检查宏任务队列，发现有 setTimeout的回调函数, 立即执行回调函数输出'setTimeout---200'.
  7. 接着遇到setTimeout 0，它的作用是在 0ms 后将回调函数放到宏任务队列中，检查微任务队列，即 microtask 队列，发现此队列不为空，执行promise的then回调，输出'promise5'。
  8. 此时microtask队列为空，进入下一个事件循环，检查宏任务队列，发现有 setTimeout 的回调函数，立即执行回调函数输出，输出'inner-setTimeout---0'。代码执行结束.

习题6

console.log("1");

setTimeout(function cb1(){
    console.log("2")
}, 0);

new Promise(function(resolve, reject) {
    console.log("3")
    resolve();
}).then(function cb2(){
    console.log("4");
})

console.log("5")
// 1 3 5 4 2

习题6解析

习题7

console.log("1");

setTimeout(() => {
    console.log("2")
    new Promise(resolve => {
      resolve()
    }).then(() => {
      console.log("3")
    })
}, 0);

setTimeout(() => {
  console.log("4")
}, 0);

console.log("5")
// 1 5 2 3 4

习题7解析

习题8

console.log("1");

setTimeout(() => {
    console.log("2")
    new Promise(resolve => {
      console.log(6)
      resolve()
    }).then(() => {
      console.log("3")
    })
}, 0);

setTimeout(() => {
  console.log("4")
}, 0);

console.log("5")
// 1 5 2 6 3 4

习题8解析

习题9

console.log('start')
setTimeout(function(){
    console.log('宏任务1号')
})
Promise.resolve().then(function(){
    console.log('微任务0号')
})
console.log('执行栈执行中')
setTimeout(function(){
    console.log('宏任务2号')
    Promise.resolve().then(function(){
        console.log('微任务1号')
    })
},500)

setTimeout(function(){
    console.log('宏任务3号')
    setTimeout(function(){
        console.log('宏任务4号')
        Promise.resolve().then(function(){
            console.log('微任务2号')
        })
    },500)
    Promise.resolve().then(function(){
        console.log('微任务3号')
    })
},600)
console.log('end')
// start 执行栈执行中 end 微任务0号 宏任务1号 宏任务2号 微任务1号 宏任务3号 微任务3号 宏任务4号 微任务2号

习题9解析

习题10

function test() {
  console.log(1)
  setTimeout(function () {  // timer1
    console.log(2)
  }, 1000)
}

test();

setTimeout(function () {        // timer2
  console.log(3)
})

new Promise(function (resolve) {
  console.log(4)
  setTimeout(function () {  // timer3
    console.log(5)
  }, 100)
  resolve()
}).then(function () {
  setTimeout(function () {  // timer4
    console.log(6)
  }, 0)
  console.log(7)
})

console.log(8)
//1 4 8 7 3 6 5 2

习题10解析

结合我们上述的JS运行机制再来看这道题就简单明了的多了

  1. JS是顺序从上而下执行
  2. 执行到test()，test方法为同步，直接执行，console.log(1)打印1
  3. test方法中setTimeout为异步宏任务，回调我们把它记做timer1放入宏任务队列
  4. 接着执行，test方法下面有一个setTimeout为异步宏任务，回调我们把它记做timer2放入宏任务队列
  5. 接着执行promise，new Promise是同步任务，直接执行，打印4
  6. new Promise里面的setTimeout是异步宏任务，回调我们记做timer3放到宏任务队列
  7. Promise.then是微任务，放到微任务队列
  8. console.log(8)是同步任务，直接执行，打印8
  9. 主线程任务执行完毕，检查微任务队列中有Promise.then
  10. 开始执行微任务，发现有setTimeout是异步宏任务，记做timer4放到宏任务队列
  11. 微任务队列中的console.log(7)是同步任务，直接执行，打印7
  12. 微任务执行完毕，第一次循环结束
  13. 检查宏任务队列，里面有timer1、timer2、timer3、timer4，四个定时器宏任务，按照定时器延迟时间得到可以执行的顺序，即Event
    Queue：timer2、timer4、timer3、timer1，依次拿出放入执行栈末尾执行 (插播一条：浏览器 event loop 的 Macrotask queue，就是宏任务队列在每次循环中只会读取一个任务)
  14. 执行timer2，console.log(3)为同步任务，直接执行，打印3
  15. 检查没有微任务，第二次Event Loop结束
  16. 执行timer4，console.log(6)为同步任务，直接执行，打印6
  17. 检查没有微任务，第三次Event Loop结束
  18. 执行timer3，console.log(5)同步任务，直接执行，打印5
  19. 检查没有微任务，第四次Event Loop结束
  20. 执行timer1，console.log(2)同步任务，直接执行，打印2
  21. 检查没有微任务，也没有宏任务，第五次Event Loop结束 结果：1，4，8，7，3，6，5，2

习题11

setTimeout(() => {
  console.log(1)
}, 0)

new Promise((resolve, reject) => {
  console.log(2)
  resolve(3)
}).then(val => {
  console.log(val)
})

console.log(4) 
// 2 4 3 1

习题11解析

习题12

for (let i = 0; i < 5; i++) {
  console.log(i)
}
console.log('done')
// 0 1 2 3 4 done

习题12解析

习题13

console.log(1)

Promise.resolve().then(() => {
  console.log(2)
})

console.log(3)
//1 3 2

习题13解析

习题14

setTimeout(() => {
  console.log(1)
}, 0)
for (let i = 2; i <= 3; i++) {
  console.log(i)
}
console.log(4)
setTimeout(() => {
  console.log(5)
}, 0)
for (let i = 6; i <= 7; i++) {
  console.log(i)
}
console.log(8)
//2 3 4 6 7 8 1 5

习题14解析

习题15

console.log(1)

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

setTimeout(() => {
  console.log(4)
}, 0)

new Promise(resolve => {
  console.log(5)
  resolve()
})
  .then(() => {
    console.log(6)
  })
  .then(() => {
    console.log(7)
  })

console.log(8)
// 1 3 5 8 2 6 7 4

习题15解析

习题16

console.log(1)

function a() {
  return new Promise(resolve => {
    console.log(2)
    setTimeout(() => {
      console.log(3)
    }, 0)
    resolve()
  })
}

a().then(() => {
  console.log(4)
})
//1 2 4 3

习题16解析

习题17

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');
//script start、script end、promise1、promise2、setTimeout

习题17解析

  1. 整体script作为第一个宏任务进入主线程，遇到console.log，输出script start
  2. 遇到 setTimeout，其回调函数被分发到宏任务 Event Queue 中
  3. 遇到 Promise，其 then函数被分到到微任务 Event Queue 中,记为 then1，之后又遇到了 then 函数，将其分到微任务 Event Queue 中，记为 then2

  4. 遇到 console.log，输出 script end。至此，Event Queue中存在三个任务，如下表：

    主流程 Macro event queue Micro event queue
    console.log('script start') console.log('setTimeout') console.log('promise1')
    console.log('script end') console.log('promise1')

习题18

console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');
//script start、promise1、script end、then1、timeout1、timeout2

习题18解析

首先，事件循环从宏任务 (macrotask) 队列开始，最初始，宏任务队列中，只有一个 script(整体代码)任务；当遇到任务源 (task source)
时，则会先分发任务到对应的任务队列中去。所以，就和上面例子类似，首先遇到了console.log，输出 script start； 接着往下走，遇到 setTimeout 任务源，将其分发到任务队列中去，记为 timeout1； 接着遇到
promise，new promise 中的代码立即执行，输出 promise1, 然后执行 resolve ,遇到 setTimeout ,将其分发到任务队列中去，记为 timemout2, 将其 then 分发到微任务队列中去，记为
then1； 接着遇到 console.log 代码，直接输出 script end 接着检查微任务队列，发现有个 then1 微任务，执行，输出then1 再检查微任务队列，发现已经清空，则开始检查宏任务队列，执行 timeout1,输出
timeout1； 接着执行 timeout2，输出 timeout2 至此，所有的都队列都已清空，执行完毕。其输出的顺序依次是：script start, promise1, script end, then1, timeout1,
timeout2。

有个小 tip：从规范来看，microtask 优先于 task 执行，所以如果有需要优先执行的逻辑，放入microtask 队列会比 task 更早的被执行。 最后的最后，记住，JavaScript
是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。

习题19

console.log(1)
setTimeout(function() {
    console.log(2)
},0)
setTimeout(function() {
    console.log(3)
},0)
console.log(4)
// 1 4 2 3

习题19解析

习题20

function fun1(){
  console.log(1)
}
function fun2(){
console.log(2)
fun1()
console.log(3)
}
fun2()
// 2 1 3

习题20解析

习题21

function func1(){
  console.log(1)
}
function func2(){
  setTimeout(()=>{
    console.log(2)
  },0)
  func1()
  console.log(3)
}
func2()
// 1 3 2

习题21解析

习题22

var p = new Promise(resolve=>{
    console.log(4) //这里没有执行p也要有输出 所以4是最开始的
    resolve(5)
})
function func1(){
    console.log(1)
}
function func2(){
    setTimeout(()=>{
        console.log(2)
    },0)
    func1()
    console.log(3)
    p.then(resolve=>{
        console.log(resolve)
    })
}
func2()
//4 1 3 5 2

习题22解析

习题21

console.log('start')
const interval = setInterval(() => {
  console.log('setInterval')
}, 0)
setTimeout(() => {
  console.log('setTimeout 1')
  Promise.resolve()
    .then(() => {
      console.log('promise 1')
    })
    .then(() => {
      console.log('promise 2')
    })
    .then(() => {
      setTimeout(() => {
        console.log('setTimeout 2')
        Promise.resolve()
          .then(() => {
            console.log('promise 3')
          })
          .then(() => {
            console.log('promise 4')
          })
          .then(() => {
            clearInterval(interval)
          })
      }, 0)
    })

  console.log('time end')
}, 0)
Promise.resolve().then(() => {
  console.log('promise 5')
}).then(() => {
  console.log('promise 6')
})

// start
// promise 5
// promise 6
// setInterval
// setTimeout 1
// time end
// promise 1
// promise 2
// setInterval
// setTimeout 2
// setInterval
// promise 3
// promise 4

习题22解析

解析： （1）先按照 macrotask 和 microtask 划分代码：

    console.log('start')

setInterval 是 macrotask，其回调函数在 microtask 后执行

    const interval = setInterval(() => {
      console.log('setInterval')
    }, 0)

setTimeout 是 macrotask，其回调函数放在下一车（cycle 2）执行

 setTimeout(() => ... , 0)

Promise.resolve () 的两个 then () 是 microtask

    Promise.resolve()
      //microtask
      .then(() => {
        console.log('promise 5')
      })
      //microtask
      .then(() => {
        console.log('promise 6')
      })

（2）第一班车（cycle 1）：
进栈

第一个 macrotask 是 setInterval，回调函数放下一车（cycle 2）的开头执行， 第二个 macrotask 是 setTimeout，回调函数放下下一车（cycle 3）的开头执行，

清空栈， 输出：start 执行 microtasks，直至清空该队列，即 Promise.resolve () 的两个 then ()， 输出：promise 5 promise 6

（3）第二班车（cycle 2）： 执行 setInterval 的回调， 输出：setInterval， 同时下一个 setInterval 也是 macrotask 但要放到 下下下一车（cycle 4）执行回调，即
下下一车（cycle 3）setTimeout 的后面

此时 setInterval 中没有 microtasks，所以该队列是空的，故进行下一车（cycle 3）

（4）第三班车（cycle 3） 执行 setTimeout 的回调， 输出 setTimeout 1 执行 microtasks，直至清空该队列，即 Promise.resolve () 的第一个和第二个 then ()，

输出：promise 1 promise 2

而 第三个 then () 中的 setTimeout 是 macrotask ，放到下下下下一车（cycle 5）执行回调， 第四个 then () 是紧跟着第三个 then () 的，所以在 下下下下一车（cycle 5）执行

此时 microtasks 已空，故进行下一车（cycle 4）

（5）第四班车（cycle 4） 由（3）得，执行 setInterval ， 输出：setInterval

此时 setInterval 中没有 microtasks，所以该队列是空的，故进行下一车（cycle 5）

同时下一个 setInterval 也是 macrotask 但要放到 下下下下下一车（cycle 6）执行回调，

（6）第五班车（'cycle 5'） 由（4）得，执行 setTimeout 输出：setTimeout 2

执行 microtasks，直至清空该队列，即 Promise.resolve () 的第一个和第二个 then ()，

输出：promise 3 promise 4

接着执行第三个 then () --> clearInterval(interval)，将下下下下下一车（cycle 6）要执行回调的 setInterval 清除

此时 microtasks 已空， 同时整段代码执行完毕。

你可能感兴趣的:(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
  • 【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是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "[email protected]"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他