JS中事件的執行順序

標籤：提交   頁面   send   data   max   不一致   asc   rtt   func   

項目需求頁面一鍵發布，下面是一個簡單demo:　　

html:

　　<button id="send">提交</button>
　　<table id="mytable"></table>

　　js:

　　　$(function(){
　　　　　$(‘#send‘).click(function(){
　　　　　　startTime = new Date();//設定開始時間
　　　　　　$.ajax({
　　　　　　　　type: "GET",
　　　　　　　　url: "data.json",
　　　　　　　　data: {},
　　　　　　　　dataType: "json",
　　　　　　　　success: function(data){
　　　　　　　　var _html = ‘‘;
　　　　　　　　for(var i= 0,len = data.chrildReslut.length;i<len;i++){
　　　　　　　　　　_html += ‘<tr><td id="‘+data.chrildReslut[i].id+‘">0%</td><tr>‘
　　　　　　　　};
　　　　　　　　　　$(‘#mytable‘).html(_html);
　　　　　　　　　　forFn(data.chrildReslut);
　　　　　　}
　　});
　　});
　});

　　

　　var i = 0;
　　function forFn(data){
　　　　if(i < data.length && data[i].reslut === ‘Y‘){
　　　　　　process(data[i].id,0,100,data);
　　　　　　i++;
　　　　}else if(i < data.length){
　　　　　　var number = parseInt(RandomNum(1,99));
　　　　　　process(data[i].id,0,number,data);
　　　　　　i++;
　　　　}
　　}

　　function RandomNum(Min,Max){
　　　　var Range = Max - Min;
　　　　var Rand = Math.random();
　　　　var num = Min + Math.round(Rand * Range);
　　　　return num;
　　};

　　function process(id,start,end,data){
　　　　var interval = setInterval(function(){
　　　　　　start+=8;
　　　　　　$(‘#‘+ id).html(start+‘%‘);
　　　　　　if(start === end || start > end){
　　　　　　　　clearInterval(interval);//關閉定時器
　　　　　　　　　　$(‘#‘+ id).html(end+‘%‘);
　　　　　　　　　　forFn(data);
　　　　　　　　}
　　　　　　},100)
　　};

　　結語：Javascript語言的執行環境是"單線程"，但是這種模式後面的耗時較長，頁面出現假死狀態。為瞭解決這個問題，Javascript語言將任務的執行模式分成兩種：同步（Synchronous）和非同步（Asynchronous）。"同步模式"就是上一段的模式，後一個任務等待前一個任務結束，然後再執行，程式的執行順序與任務的排列順序是一致的、同步的；"非同步模式"則完全不同，每一個任務有一個或多個回呼函數（callback），前一個任務結束後，不是執行後一個任務，而是執行回呼函數，後一個任務則是不等前一個任務結束就執行，所以程式的執行順序與任務的排列順序是不一致的、非同步。"非同步模式"非常重要。在瀏覽器端，耗時很長的操作都應該非同步執行，避免瀏覽器失去響應，最好的例子就是Ajax操作。在伺服器端，"非同步模式"甚至是唯一的模式，因為執行環境是單線程的，如果允許同步執行所有http請求，伺服器效能會急劇下降，很快就會失去響應。本文參考阮一峰老師Javascript非同步編程的4種方法 http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html。

 

　　

JS中事件的執行順序