javascript - Kod dalam gelung for dalam js belum dilaksanakan, tetapi kod berikut dilaksanakan?

Question

Kod berikut boleh berjalan seperti biasa, tetapi [Kaedah 2] mesti menambah pemasa untuk mengelakkan melaporkan ralat Secara logiknya, bukankah JS sepatutnya melaksanakan kod [Kaedah 1] sebelum melaksanakan [Kaedah 2] berikut tanpa menggunakan pemasa? Tiada cara lain untuk memastikan bahawa [Kaedah 1] dilaksanakan sepenuhnya sebelum melaksanakan [Kaedah 2]

Fungsi demonstrasi dalam talian: http://bbs2.valueonline.cn/we...
muat turun demo: http://pan.baidu.com/s/1dEHPTV7

Kod JS utama:

$(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 itu sendiri tidak segerak dan mesti dilaksanakan mengikut urutan yang ketat:

1. Fungsi panggilan balik;

2. janji / hasil;

3. async / menunggu (memerlukan keserasian es5);

Memperkenalkan perpustakaan async.js;

Answer 2

js adalah berutas tunggal, iaitu, selepas satu pelaksanaan selesai, yang seterusnya dilaksanakan
Pernyataan kecil dan penyataan pelaksanaan pantas dilaksanakan dari atas ke bawah apabila menghadapi yang perlahan, seperti dua fungsi yang anda nyatakan. ia tidak akan Melaksanakan tertib dari atas ke bawah.
Penyelesaian adalah seperti yang ditunjukkan dalam jawapan rakan di atas
Cara paling mudah ialah menulis fungsi panggil balik, yang juga merupakan kaedah yang paling biasa digunakan adalah untuk mengawal susunan pelaksanaan dua fungsi

Fungsi b dihantar ke fungsi a dalam bentuk parameter, kemudian fungsi b dipanggil fungsi panggil balik.
b diletakkan di hujung a Selepas a dilaksanakan, b
dan ke atas akan dilaksanakan semula

Answer 3

Anda laksanakan kod berikut dahulu
Anda menggunakan jquery ready dan kemudian laksanakan kod 1