settimeout mdn（Node.js的HTTP与事件初步介绍&怎么查看API）

本文目录

• Node.js的HTTP与事件初步介绍&怎么查看API
• 如何使用HTML5实现全屏API
• 实现promise.all方法

Node.js的HTTP与事件初步介绍&怎么查看API

Node.js的HTTP与事件初步介绍&如何查看API(入门篇)　　Node.js的HTTP与事件初步介绍&如何查看API(入门篇)　　接着第一篇来说，当然，同样约定下面简称为Node(个人认为比较标准的说法)，标题用node.js主要是为了方便阅读。同样，大牛可以略过这篇文章啦！现在，主要说3个问题：（1）接着第一篇介绍完Http其他部分（2）事件模型的介绍（3）如何查看API 文档.　　首先感谢下网友hellostory，修改下上一篇的程序的bug。　　一、修改前一篇的程序bug　　　　　　二、接着说HTTP其他部分　　因为HTTP是Node的核心模块，因此，接着上一篇，把HTTP模块讲完。　　1、 var upload=new Upload(); //设置事件监听 upload.on(’init’,function(){ console.log(’文件格式、字符集、大小判断....’); }); upload.on(’checkOk’,function(){ console.log(’检测完毕....’); }); upload.on(’over’,function(){ console.log(’上传成功....OK’); }); //触发事件 upload.emit(’init’); upload.emit(’checkOk’); upload.emit(’over’);

如何使用HTML5实现全屏API

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：【进入和退出全屏】// Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen();// Firefox 10+element.mozRequestFullScreen();document.mozCancelFullScreen();// W3C 提议element.requestFullscreen();document.exitFullscreen();//进入全屏function requestFullScreen() {var de = document.documentElement;if (de.requestFullscreen) {de.requestFullscreen();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();}}//退出全屏function exitFullscreen() {var de = document;if (de.exitFullscreen) {de.exitFullscreen();} else if (de.mozCancelFullScreen) {de.mozCancelFullScreen();} else if (de.webkitCancelFullScreen) {de.webkitCancelFullScreen();}}//调用document.body.addEventListener(’click’,function(){requestFullScreen();//5秒钟自动退出全屏setTimeout(function(){exitFullscreen();},5000);},false);检查全屏状态变化 Detecting fullscreen state changedocument.addEventListener(“fullscreenchange“, function () {fullscreenState.innerHTML = (document.fullscreen)? ““ : “not “;}, false);document.addEventListener(“mozfullscreenchange“, function () {fullscreenState.innerHTML = (document.mozFullScreen)? ““ : “not “;}, false);document.addEventListener(“webkitfullscreenchange“, function () {fullscreenState.innerHTML = (document.webkitIsFullScreen)? ““ : “not “;}, false);css的全屏样式 Styling fullscreen在css中，我们有几个伪类来给全屏设置样式，一般是 full-screen 这个伪类，然后会自动再全屏的时候生效html:-moz-full-screen {background: red;}html:-webkit-full-screen {background: red;}html:fullscreen {background: red;}全屏状态下的键盘输入 Full screen with key input为了安全原因，很多情况下全屏输入都是被阻塞禁止的，但是chrome允许通过下面的API来允许键盘输入docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 这个只在chrome支持，其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入，但是会触发用户通知已保证安全。firefox10以上，chrome 15和safari5.1以上都支持了。

实现promise.all方法

1- Promise.all 的用法

逆向的去实现功能，最关键的前提是准确了解API，输入、输出、和注意事项。

这里直接引用MDN：

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果。

MDN后面也给出了详细说明：

此方法在集合多个promise的返回结果时很有用。

完成（Fulfillment）：

• 如果传入的可迭代对象为空，Promise.all会同步地返回一个已完成（resolved）状态的promise。

• 如果所有传入的promise都变为完成状态，或者传入的可迭代对象内没有promise，Promise.all返回的promise异步地变为完成。

• 在任何情况下，Promise.all返回的promise的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非promise值）。

失败/拒绝（Rejection）：

如果传入的promise中有一个失败（rejected），Promise.all异步地将失败的那个结果给失败状态的回调函数，而不管其它promise是否完成。

个人感觉MDN解释的比较清楚了，还是云里雾里的话，可以反复细品一下上面的说明。或者结合下面的代码去理解。

2 - 手动实现Promise.all

面试美团的时候，面试官看我写不出来，就说“既然你知道了输入和输出是什么，应该能写出来了....”。

面试官其实不是在鄙视我“我不行”，而是在试图引导我的思路，只是当时自己编程思路太差，最后还是没写出来。

但是面试官的提示，确实是一个很好的思考思路。 先不管完整的Promise.all代码是什么样子，甚至包括优化啥的。先想想“Promise.all(iterable) 方法返回一个 Promise实例“，就这么简单的一句话怎么写呢？

• function myPromiseAll(arr) {  // 参数是一个iterable对象，一般是数组
•   // 返回一个Promise实例
•    return new Promise((resolve, reject) =》 {
•        resolve(“面试官让我写一个Promise.all“);
•        // 或者
•        // reject(“我太笨了，写不出来“);
•        
•    });
• }
• let pResult = myPromiseAll();  // 先不要去想数组有没有元素
• pResult.then(value=》{
•    console.log(value);  // 输出: 面试官让我写一个Promise.all
• }, err=》{
•    console.log(err);
• })

好了，如过看懂了，那么最重要的一步就完成了。是不是很简单。

接下来，只要根据MDN的说明，一步步完善内部函数的功能就行了。

我们先从“完成”情况下手：完成（Fulfillment）：

• A. 如果传入的可迭代对象为空，Promise.all会同步地返回一个已完成（resolved）状态的promise。

• B. 如果所有传入的promise都变为完成状态，或者传入的可迭代对象内没有promise，Promise.all返回的promise异步地变为完成。

• C. 在任何情况下，Promise.all返回的promise的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非promise值）。

请先看C，在完成情况下，会始终返回一个数组.

• function myPromiseAll(arr) {
•    // 定义一个数组
•    let result = ;
•    return new Promise((resolve, reject) =》 {
•        // 现在只考虑 “在完成情况下” ，会返回一个数组
•        resolve(result);
•      
•        
•    });
• }
• let pResult = myPromiseAll();
• pResult.then(value=》{
•    console.log(pResult);  // 输出 Promise { 《state》: “fulfilled“, 《value》: }
•    console.log(value); // 输出：
• })

那么下面来实现B，B里有分两种情况：

• 元素是Promise实例

• 元素不是Promise实例

那先考虑元素不是Promise实例，从简单的开始

• function myPromiseAll(arr) {
•    let result = ;
•    return new Promise((resolve, reject) =》 {
•        for(let i = 0; i 《 arr.length; i++) {
•            result.push(arr);
•        }
•        resolve(result);
•      
•        
•    });
• }
• let pResult = myPromiseAll();  // 元素不是Promise实例
• pResult.then(value=》{
•    console.log(pResult); // 输出:  Promise { 《state》: “fulfilled“, 《value》: (3) }
•    console.log(value); // 输出： Array(3)
• })

最难的来了，元素都是Promise实例呢？别慌，先写顶层设计，再想细节（自上向下编程）

• function myPromiseAll(arr) {
•    let result = ;
•    return new Promise((resolve, reject) =》 {
•        for(let i = 0; i 《 arr.length; i++) {
•            
•            if(/*如果是Promise实例*/) {
•                
•            } else {
•                result.push(arr);
•            }
•        }
•        // 先想想，resolve放在这里，对不对？
•        resolve(result);
•      
•        
•    });
• }

继续完善

• function myPromiseAll(arr) {
•    let result = ;
•    return new Promise((resolve, reject) =》 {
•        // 数组为空，直接resolve了
•        if(arr.length == 0) {
•            resolve(result);
•        }
•        for(let i = 0; i 《 arr.length; i++) {
•            
•            if(arr.then) { // 若元素是Promise实例，则会有then函数，这里只是简单的作为判断标准
•                
•                // 元素是Promise
•                arr.then(value =》 {
•                    console.log(value);
•                    result.push(value);
•                    // 想一想什么时候resolve呢？--- 所有Promise实例都完成了
•                    if(result.length == arr.length) {
•                       console.log(“所有都完成了“)
•                        resolve(result);
•                    }
•                })
•                
•            } else {
•                result.push(arr);
•                // 这段代码跟上面重复，想想，能不能提取放到外面，会出现什么情况呢？
•                if(result.length == arr.length) {
•                    resolve(result);
•                }
•            }
•        }
•    });
• }
• let p1 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 2000, “P1 resolved“);
• })
• let p2 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 3000, “P2 resolved“);
• })
• let p3 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 4000, “P3 resolved“);
• })
• let pResult = myPromiseAll();
• pResult.then(value=》{
•    console.log(pResult);
•    console.log(value);
• })
• // 输出
• // P1 resolved
• // P2 resolved
• // P3 resolved
• // 所有都完成了
• // Promise { 《state》: “fulfilled“, 《value》: (3) }
• // Array(3)

完成情况写完了，还剩失败情况：

• 如果传入的 promise 中有一个失败（rejected），Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成。

• function myPromiseAll(arr) {
•    let result = ;
•    return new Promise((resolve, reject) =》 {
•        // 如果数组为空，直接返回空数组
•        if(arr.length == 0) {
•            resolve(result);
•        }
•        for(let i = 0; i 《 arr.length; i++) {
•            
•            if(arr.then) { // 若元素是Promise实例，则会有then函数，这里只是简单的作为判断标准
•                
•                // 元素是Promise
•                arr.then(value =》 {
•                    console.log(value);
•                    result.push(value);
•                    // 想一想什么时候resolve呢？
•                    if(result.length == arr.length) {
•                        console.log(“所有都成功了“)
•                        resolve(result);
•                    }
•                }, err =》 {
•                    console.log(“很不幸，其中一个失败了“);
•                    // 注意到没, 这里没有像上面的判断 result.length == arr.length, 为什么？
•                    // 只要碰到 resolve 或 reject ，就结束了
•                    reject(err);
•                })
•                
•            } else {
•                result.push(arr);
•                // 这段代码跟上面重复，想想，能不能提取放到外面，会出现什么情况呢？
•                if(result.length == arr.length) {
•                    resolve(result);
•                }
•            }
•        }
•    });
• }
• let p1 = new Promise((resolve, reject)=》 {
•    setTimeout(reject, 2000, “P1 rejected“);
• })
• let p2 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 3000, “P2 resolved“);
• })
• let p3 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 4000, “P3 resolved“);
• })
• let pResult = myPromiseAll();
• pResult.then(value=》{
•    console.log(pResult);  // 是输出成功
•    console.log(value);
• }, err =》 {
•    console.log(pResult);   // 还是输出失败呢？
•    console.log(err);
• })
• // 输出
• // 很不幸，其中一个失败了
• // Promise { 《state》: “rejected“ }
• // P1 rejected
• // P2 resolved
• // P3 resolved

为什么最后还是输出了 P2 和 P3 的结果呢？ 这是因为，尽管遇到了P1就reject了，然而 P2 和 P3 仍在执行。注意MDN说的是“不管其他Promise是否完成”，而不是“其他Promise被stop”。

• let p2 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 3000, “P2 resolved“);
• })
• let p3 = new Promise((resolve, reject)=》 {
•    setTimeout(resolve, 4000, “P3 resolved“);
• })
• let pResult = myPromiseAll();
• pResult.then(value=》{
•    console.log(pResult);
•    console.log(value); // 输出
• }, err =》 {
•    console.log(pResult);
•    console.log(err);