javascript - The code in the for loop in js has not been executed, but the following code is executed?

Question

The following code can run normally, but [Method 2] must add a timer to avoid reporting an error. Logically speaking, shouldn’t JS execute the [Method 1] code before executing the following [Method 2]? Timing is not used Is there any other way to ensure that [Method 1] is completely executed before executing [Method 2]

Function online demonstration: http://bbs2.valueonline.cn/we...
demo download: http://pan.baidu.com/s /1dEHPTV7

Main JS code:

$(function(){
//方法一：表格转图片点击在新窗口中打开
var tableImg=(function(){
    var _fixType = function(type) {
      type = type.toLowerCase().replace(/jpg/i, 'jpeg');
      var r = type.match(/png|jpeg|bmp|gif/)[0];
      return 'image/' + r;
    };

    function limitIMG(obj){
      html2canvas(obj,{
          onrendered:function(canvas){
              var type = 'jpeg';
              var imgData = canvas.toDataURL(type);
              imgData = imgData.replace(_fixType(type),'image/octet-stream');
              var newImg='<img src="'+imgData+'"  class="tableImg"/>';
              obj.after(newImg);

              //图片宽度限制
              var limitImg=(function(){
                  var a=obj.width();
                  var b=$(window).width();
                  if(a>b){
                      obj.next().width("100%");
                  }
                  obj.remove();
              })()
          }
      })
    }

    //点击哪个tableImg 就存储哪个到storage里面
    var num=$("body").find("table").length;
    for(var i=0;i<num;i++){
        limitIMG($('table').eq(i));
    }

    //设置数据
    $("#content").on("click",".tableImg",function(){
        sessionStorage.setItem("tableImg", $(this).attr("src"));
        window.open("tableImg.html");
    })
})()


//方法二：文字长度限制，收缩
setTimeout(function(){
    var showMore='<a href="javascript:" class="activeColor btnSS" data-onOff="true">展开说明</a>';
    $(".detailTxt").each(function(){
      var strOld=$(this).html();
      var str=strOld.replace(/<img(.*?)>/g, "[图片]");  //把img标签替换成[图片]显示
      str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
      str = str.replace(/\s+/g,"");  //去除所有空格:
      str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
      var length=str.length;
      var maxNum=76;
      if(length>maxNum){
          str=str.substring(0,maxNum)+"...";
          $(this).html(str);
          $(this).after(showMore);
          //点击收缩内容；
          $(this).next().click(function(){
              var onOff=$(this).attr("data-onOff");
              if(onOff=="true"){
                  $(this).prev().html(strOld);
                  $(this).html("收起");
                  $(this).attr("data-onOff","false");
              }
              else{
                  $(this).prev().html(str);
                  $(this).html("展开说明");
                  $(this).attr("data-onOff","true");
              }
          })
      }
  })
  },1000);
})

Answer 1

js itself is asynchronous and must be executed in strict order:

1. Callback function;

2. promise / yield;

3. async / await (requires es5 compatibility);

4. Introducing async.js library;

Answer 2

js is single-threaded, that is, after one execution is completed, the next one is executed.
Small statements and fast-executing statements are executed from top to bottom. When encountering slow ones, such as the two functions you mentioned, it will not Execute in order from top to bottom.
The solution is as shown in the friend’s answer above.
The simplest way is to write callback function, which is also the most commonly used method. The purpose is to control the order of execution of two functions

Function b is passed to function a in the form of a parameter, then function b is called a callback function.
b is placed at the end of a. After a is executed, b
and above will be executed again

Answer 3

You execute the following code first
You use jquery ready and then execute code 1