JS异步那些事 一 (基础知识)

JS异步那些事 一 (基础知识)
JS异步那些事 二 (分布式事宜)
JS异步那些事 三 (Promise)
JS异步那些事 四(HTML 5 Web Workers)
JS异步那些事 五 (异步剧本加载)

js事宜观点

异步回调:

起首了讲讲js中 两个要领 setTimeout()和 setInterval()

定义和用法:

setTimeout() 要领用于在指定的毫秒数后挪用函数或盘算表达式。

语法:

setTimeout(callback,time)

callback 必须。要挪用的函数后要实行的 JavaScript 代码串。
time 必须。在实行代码前需守候的毫秒数。

setInterval() 要领和setTimeout很相似,可根据指定的周期(以毫秒计)来挪用函数或盘算表达式。

<script type="text/javascript">
function timeCount()
{console.log("this is setTimeout");
setTimeout("timeCount()",1000);

}

function timeCount2(){
console.log("this is setInterval");
}
setInterval("timeCount2()",1000);

timeCount();
timeCount2();
</script>

比方上述代码就是可以每隔1000毫秒耽误实行timecount函数,差别的是后者是周期的实行timecount函数,
SetInterval为自动反复,setTimeout不会反复。

线程壅塞

JavaScript引擎是单线程运转的,浏览器不管在什么时候都只且只要一个线程在运转JavaScript顺序.

<script type="text/javascript"> 
function f() { console.log("hello world");} 
var t = new Date();  //运转5秒 
while(true) { 
if(new Date() - t > 5000) { 
break; } 
} 
setTimeout(f, 1000); 
</script>

实行上述代码,可以发明,总的运转时候险些要6秒多,因为是单线程,会在while轮回内里斲丧5秒的时候,然后才去实行settimeout函数。

行列

浏览器是基于一个事宜轮回的模子,在这内里,可以有多个使命行列,比方render是一个行列,相运用户输入是一个,script实行是一个。使命行列里放的是使命,同一个使命泉源的使命肯定在同一个使命行列里。使命有优先级,鼠标或键盘相应事宜优先级高,大概是其他使命的3倍。

而我们经常使用的setTimeout函数,其本质上也就是向这个使命行列增加回调函数,JavaScript引擎一向守候着使命行列中使命的到来.因为单线程关联,这些使命得举行列队,一个接着一个被引擎处置惩罚.

假如行列非空,引擎就从行列头掏出一个使命,直到该使命处置惩罚完,即返回后引擎接着运转下一个使命,在使命没返回前行列中的别的使命是没法被实行的.

异步函数范例

异步IO:

起首来看看很典范的一个例子 ajax

<script type="text/javascript"> 
var  ajax = new XMLHttpRequest;
ajax.open("GET",url); 
ajax.send(null);
ajax.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}
</script>

异步计时:

setTimeout,setInterval都是基于事宜驱动型的,平常浏览器不会给这个太快的速率,平常是200次/秒,效力太低了是吧假如碰到有密集型的运算的话,那就呵呵了。然则在node.js中另有process.nextTick()这个壮大的东西,运转的速率快要10万次/秒,很可观。

process.nextTick(callback)

功用:在事宜轮回的下一次轮回中挪用 callback 回调函数。结果是将一个函数推晚到代码誊写的下一个同步要领实行终了时或异步要领的事宜回调函数最先实行时;与setTimeout(fn, 0) 函数的功用相似,但它的效力高多了。

基于node.js的事宜轮回剖析,每一次轮回就是一次tick,每一次tick时,v8引擎从事宜行列中掏出一切事宜顺次举行处置惩罚,假如碰到nextTick事宜,则将其加入到事宜队尾,守候下一次tick到来时实行;形成的结果是,nextTick事宜被耽误实行;

nextTick的确是把某使命放在行列的末了(array.push)
nodejs在实行使命时,会一次性把行列中一切使命都拿出来,顺次实行
假如悉数顺利完成,则删除适才掏出的一切使命,守候下一次实行
假如半途失足,则删除已完成的使命和失足的使命,守候下次实行
假如第一个就失足,则throw error

下面看一下运用场景(包括盘算密集型操纵,将其举行递归处置惩罚,而不壅塞历程):

var http = require('http');
var wait = function (mils) {
    var now = new Date;
    while (new Date - now <= mils);
};
function compute() {
    // performs complicated calculations continuously
    console.log('start computing');
    wait(1000);
    console.log('working for 1s, nexttick');
    process.nextTick(compute);
}
http.createServer(function (req, res) {
    console.log('new request');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(5000, '127.0.0.1');
compute();

异步毛病处置惩罚

异步异常的特征

因为js的回调异步特征,没法经由过程try catch来捕捉一切的异常:

try {
  process.nextTick(function () {
      foo.bar();
  });
} catch (err) {
  //can not catch it
}

而关于web效劳而言,实际上是异常愿望如许的:

//express作风的路由
app.get('/index', function (req, res) {
  try {
    //营业逻辑
  } catch (err) {
    logger.error(err);
    res.statusCode = 500;
    return res.json({success: false, message: '效劳器异常'});
  }
});

假如try catch可以捕捉一切的异常,如许我们可以在代码涌现一些非预期的毛病时,可以纪录下毛病的同时,友爱的给挪用者返回一个500毛病。惋惜,try catch没法捕捉异步中的异常。
岂非我们就如许摒弃了么? 实在另有一个方法

onerror事宜

我们平常经由过程函数名通报的体式格局(援用的体式格局)将要实行的操纵函数通报给onerror事宜,如

window.onerror=reportError;
window.onerror=function(){alert('error')}

但我们能够不知道该事宜触发时还带有三个默许的参数,他们分别是毛病信息,毛病页面的url和毛病行号。

<script type="text/javascript">   
    window.onerror=testError;   
    function testError(){   
    arglen=arguments.length;   
    var errorMsg="参数个数:"+arglen+"个";   
    for(var i=0;i<arglen;i++){   
    errorMsg+="\n参数"+(i+1)+":"+arguments[i];   
}   
    alert(errorMsg);   
    window.onerror=null;   
    return true;   
}   
function test(){   
    error   
}   
test()   
</script> 

嵌套式回调的解嵌套

JavaScript中最罕见的反形式做法是,回调内部再嵌套回调。

<script type="text/javascript"> 
function checkPassword(username, passwordGuess, callback) {  
  var queryStr = 'SELECT * FROM user WHERE username = ?';  
  db.query(queryStr, username, function (err, result) {  
    if (err) throw err;  
    hash(passwordGuess, function(passwordGuessHash) {  
      callback(passwordGuessHash === result['password_hash']);  
    });  
  });  
} </script> 

这里定义了一个异步函数checkPassword,它触发了另一个异步函数db.query,而后者又能够触发别的一个异步函数hash。它能用,而且简洁明了。然则,假如试图向其增加新特征,它就会变得毛里毛躁、险象环生,比方去处置惩罚谁人数据库毛病,而不是抛失足误、纪录尝试接见数据库的次数、壅塞接见数据库,等等。
下面我们换一种写法,虽然这类写法很烦琐然则可读性更高而且更容易扩大。

<script type="text/javascript"> 
function checkPassword(username, passwordGuess, callback) {  
  var passwordHash;  
  var queryStr = 'SELECT * FROM user WHERE username = ?';  
  db.query(qyeryStr, username, queryCallback);  
 
  function queryCallback(err, result) {  
    if (err) throw err;  
    passwordHash = result['password_hash'];  
    hash(passwordGuess, hashCallback);  
  }  
 
  function hashCallback(passwordGuessHash) {  
    callback(passwordHash === passwordGuessHash);  
  }  
}  </script> 

在日常平凡写嵌套时,我们应当只管防止多层嵌套,不然中心某个处所失足了将会致使你投入更多的时候去debug。

    原文作者:outshineamaze
    原文地址: https://segmentfault.com/a/1190000005081689
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞