JS中事件的执行顺序

项目需求页面一键发布，下面是一个简单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。

 

　　

转载于:https://www.cnblogs.com/ffyyy/p/7340766.html