站内搜索

本次搜索找到结果 9 条

本篇文章,主要总结一下,JavaScript中异步的处理方式。JavaScript异步处理的方式主要包括以下几种形式。 回调函数、发布订阅、Promise、Generator、async&await、Thunk。

本章我们分别来讲一下不同处理异步的方式是什么样的,以及它们之间的联系。

一个小坑

最近给项目添加pm2的时候,踩了一个坑。文件的目录结构如下:

/project
  /app
    start.js
    data.json
  pm2.json

start.js中,有如下操作:

fs.readFile('./data.json', function (err, buffer) {
  if (err) {
    return console.log('error: ', err);
  }
  console.log('OK');
});

debouncethrottle是老生常谈的处理频繁触发函数的两种不同的方式。网上讲它们两者之间的区别的文章已经比比兼是,但很多都是说怎么用lodashunderscore中这两个方法,当然也有部分讲它们内部是如何实现的。本文是我自己查看lodashunderscore的源码加上自己的理解做的一个总结。

其实写这篇文章的起因是一道比较老的题目,在控制台直接打印++[[]][+[]]+[+[]]会输出10,原因是什么?直接搜索就会找到一大堆解释。

刚开始看到这道题我也比较懵,仔细看看,就会发现还是比较明了的。原本就这么过去了,昨天看到月影大大写了一篇关于为什么[]是false而!![]是true的文章,今天偶然在知乎上看到一个利用JavaScript隐式类型变换来输出各种字母的帖子,还找到了一个利用[]()!+六个字符写出任何JavaScript代码的github项目(这是一个很老的项目,自己太孤陋寡闻了吧)。发现自己还有很多地方理解不透,所以在此写一篇文章来总结、记录、分享一下。

首先至少你要知道JavaScript中原本就有六种数据类型,UndefinedNullBooleanStringNumberObjectES6中引入了一种新的数据类型Symbol,所以一共有七种。

这部分内容源于知乎上的一个提问

setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);

// 1
// 2
// 3
// 5
// 4

之前我们说过then方法添加的回调函数都是异步执行的,所以按照我们正常的认知,结果应该是12345,因为4是先添加到异步队列,而5在之后添加到异步队列。

知乎的问题也有何幻大神详细的讲解。这里我就简单的说一下吧。

我们都知道javascript是单线程的,也就是说,一个时间只能做一件事。所以,所有的任务都要按照一定的顺序排队,然后一个一个执行。如果所有的任务都是同步的,那就没有什么问题,代码按照从前到后的顺序依次执行就可以了,但我们实际工作过程中,难免会有一些操作需要异步执行——比如事件,比如ajax,比如setTimeout

最近懒癌发作,说好的系列文章,写了一半,一直懒得写,今天补上一篇。

Deferred

我们在使用promise对象时,总会提到一个与它关系密切的对象——Deferred。其实Deferred没什么内容可讲的,其实很简单。

  • 它包含一个promise对象

  • 它可以改变对应的promise的状态

简单的实现如下:

class Deferred{
    constructor(){
        let defer = {};
        defer.promise = new Promise((resolve, reject)=>{
            defer.resolve = resolve;
            defer.reject = reject;
        })
        return defer;
    }
}

我们知道promise对象内部的状态,本身是在创建对象时传入的函数内控制,外部是访问不到的,Deferred对象在它的基础上包装了一层,并提供了两个在外部改变它状态的方法。

今天,我带着大家一步一步跟着规范实现一个自己的Promise,大家可以对照我的第二篇文章Promise介绍--规范篇或官方规范来一一学习。

Promise内部有三个固定的状态,我们在文件中提前定义。

const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"

本篇文章是Promise系列文章的第二篇,主要是讲解基于Promise/A+规范,在传入不同类型的参数时,promise内部分别会如何处理。本章的主要目的是让大家对promise有一个更加深入的理解,也为下一篇讲如何实现一个promise库做准备。(写完之后觉得好水。。。)

英文版本的规范见这里

在此,我主要是通过使用例子,讲解一下规范中then方法和Promise Resolution Procedure的每一种情况。

前言

Promise,相信每一个前端工程师都或多或少地在项目中都是用过,毕竟它早已不是一个新名词。ES6中已经原生对它加以支持,在caniuse中搜索一下Promise,发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用es6-promise这个polyfill库来加以兼容。

暂且不谈awaitasync,在Google或百度或360搜索等搜索引擎、或者在segmentfault等社区中,我们可以搜到一大把介绍promise的文章,毕竟它已经出现了很长时间,早已有很多大神分析讲解过。