JS中事件的执行顺序

2021-06-05 22:05

阅读:704

标签:提交   页面   send   data   max   不一致   asc   rtt   func   

项目需求页面一键发布,下面是一个简单demo:  

html:

  
  

  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           _html += ‘0% ‘
        };
          $(‘#mytable‘).html(_html);
          forFn(data.chrildReslut);
      }
  });
  });
 });

  

  var i = 0;
  function forFn(data){
    if(i       process(data[i].id,0,100,data);
      i++;
    }else if(i       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中事件的执行顺序

标签:提交   页面   send   data   max   不一致   asc   rtt   func   

原文地址:http://www.cnblogs.com/ffyyy/p/7340766.html


评论


亲,登录后才可以留言!