promise与Deferred

$.Deferred

var wait = function(dtd){
    var tasks = function(){
        console.log('OK');
        dtd.resolve();
    };
    setTimeout(tasks,5000);
    return dtd.promise();
};
$.Deferred(wait)
    .done(function(){
        console.log('success');
    })
    .fail(function(){
        console.log('faile');
    });

事件观察者模式:

var PubSub = {
    handlers:{},
    on :function(eventType,handler){
        if(!(eventType in this.handlers)){
            this.handlers[eventType] = [];
        }
        this.handlers[eventType].push(handler);
        return this;
    },
    emit :function(eventType){
        var args = Array.prototype.slice.call(arguments,1);
        for(var i= 0,l=this.handlers[eventType].length;i<l;i++){
            this.handlers[eventType][i].apply(this,args);
        }
        return this;
    }
};

get请求

$.get('/asyncdata/userInfo',function(){
    console.log('success1');
});
$.when($.get('/asyncdata/userInfo')).done(function(){
    console.log('aasfsafsafatest')
});

上面这行代码与使用回调的写法是一样的

function c(){
    console.log('4444444');
}
function b(c){
    $.get('/asyncdata/userInfo',c);
}
b(c);

这个也是一样的

var fetchingData = $.get('/asyncdata/userInfo');
fetchingData.done(function(){
    console.log('success')
});
fetchingData.fail(function(){
    console.log('fail')
});

Deferred对象:

 var promptDeferred = new $.Deferred();

 promptDeferred.always(function(){ //扔到事件队列里去,等遇到Deferred对象执行reject或resolve方法时再去执行
 console.log('11111111')
 });

 promptDeferred.done(function(){  //扔到事件队列里去,等遇到Deferred对象执行reject方法时再去执行
 console.log('22222222')
 });

 promptDeferred.fail(function(){  //扔到事件队列里去,等遇到Deferred对象执行resolve方法时再去执行
 console.log('3333333333')
 });

 promptDeferred.progress(function(){  //扔到事件队列里去,等遇到Deferred对象执行resolve方法时再去执行
 console.log('44445555')
 });

Deferred就是Promis,更准确地说,Deferred是Promise的超集,它比promis多了一项关键特性:可以直接触发。
使用resolve(执行)或reject(拒绝)方法;
通俗一点讲也就是Deferred对象与Promis对象的区别在于:Deferred对象拥有resolve(执行)或reject(拒绝)这两个方法,而Promis对象是不具有这两个方法的。

 promptDeferred.notify();  //触发progress事件
 promptDeferred.reject();   //触发always与fail事件
 promptDeferred.resolve();  //触发always与done事件

promise对象:

var promise = $.get('/mydata');
promise.done(function(){ //扔到事件队列里去,等文件的所有代码运行完成之后再去执行
    console.log('onSuccess');
});
promise.always(function(){ //扔到事件队列里去,等文件的所有代码运行完成之后再去执行
    console.log('always');
});
promise.fail(function(){ //扔到事件队列里去,等文件的所有代码运行完成之后再去执行
    console.log('onFailure');
});

var errorPromise = $('.error').fadeIn().promise();
errorPromise.done(function(){ //promise对象等待fadeIn方法执行完成时就执行done事件
    console.log('error')
}); //fadeIn执行完成后会自动执行done方法;

var slideUpDeferred = new $.Deferred();
$('.menu').slideUp(slideUpDeferred.resolve);  //slideUp执行完成后会由resolve去执行Deferred对象的done或always方法;

onReady事件:

$(onReady);
$(document).ready(onReady);
$.ready.promise().done(onReady);

Deferred对象:

var aDreamDeferred = new $.Deferred();
aDreamDeferred.done(function(subject){ //扔到事件队列里去不直接执行,直到碰到resolve事件时再去执行
    console.log(subject);
});
aDreamDeferred.resolve('the JS event model');  //执行done事件


var timing = new $.Deferred();
timing.done(function(data){
    console.log(data);
});
$.get('/asyncdata/userInfo',timing.resolve('data'));

$.ajax

function getReslut(){
    $.ajax('/asyncdata/userInfo')
        .done(function(){
            console.log('111111111');
        })
        .fail(function(){
            console.log('66666666')
        })
        .done(function(data){
            console.log(data)
        })
}
getReslut();

$.when

var wait = function(){
    var tasks = function(){
        console.log('OK');
    };
    setTimeout(tasks,5000);
};
$.when(wait())
    .done(function(){  //直接运行最后才运行tasks
        console.log('success');
    })
    .fail(function(){
        console.log('faile');
    });

html5 UI线程 worker

前述

单线程(Single-threaded)运行是JavaScript语言的设计目标之一,进而言之是保持JavaScript的简单。但是我必须要说,尽管JavaScript具有如此语言特质,但它绝不简单!我们所说的“单线程”是指JavaScript只有一个线程控制。是的,这点令人沮丧,JavaScript引擎一次只能做一件事。

简介

html5 UI线程 worker:

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。
Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。
“web workers处在一个严格的无DOM访问的环境里,因为DOM是非线程安全的。”

HTML5 中的 Web Worker 可以分为两种不同线程类型:

一个是专用线程 Dedicated Worker
一个是共享线程 Shared Worker。

Alt text

html5 Worker对象:

var calculationCache = {},
    calculationCallbacks = {},
    mathQorker = new Worker('calculator.js');

mathQorker.addEventListener('message',function(e){
    var message = e.data;
    calculationCache[message.formula] = message.result;
    calculationCallbacks[message.formula].forEach(function(callback){
        callback(message.result);
    })
});

function runCalculation(formula,callback){
    if(formula in calculationCache){
        return callback(calculationCache[formula]);
    }
    if(formula in calculationCallbacks){
        return calculationCallbacks[formula].push(callback);
    }
    mathQorker.postMessage(formula);
    calculationCallbacks[formula] = [callback];
}

个人通俗的理解:
主线程的postMessage方法会触发专用线程的message方法,
专用线程的postMessage方法会触发主线程的message方法。
这样可使得两个线程之间来回进行通信。

var worker = new Worker('boknows.js');
worker.addEventListener('message',function(e){
    console.log(e.data);
});
worker.postMessage('football');
worker.postMessage('testball');

//boknows.js
self.addEventListener('message',function(e){
    self.postMessage('Bo knows ' + e.data);
});

html5中的worker对象,是开辟了一条属于自己的线程,叫专用线程,也可以通过worker对象开辟一条共享线程,
开辟的线程时,在同一时间,两条 线程上的东西,同时在运行,A线程可以把结束返回给B线程,B线程也可以把结果抛给A线程,这样性能就提升了,不用一个一个挨着等待了。