javascript - Le code de la boucle for dans js n'a pas été exécuté, mais le code suivant a été exécuté ?

Question

Le code suivant peut s'exécuter normalement, mais la [Méthode 2] doit ajouter un minuteur pour éviter le rapport d'erreurs. Logiquement, JS ne devrait-il pas exécuter le code de la [Méthode 1] avant d'exécuter la [Méthode 2] suivante ? utiliser une minuterie ? Il n'y a pas d'autre moyen de garantir que la [Méthode 1] est complètement exécutée avant d'exécuter la [Méthode 2]

Démonstration en ligne de la fonction : http://bbs2.valueonline.cn/we...
Téléchargement de la démo : http://pan.baidu.com/s/1dEHPTV7

Code JS principal :

$(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 lui-même est asynchrone et doit être exécuté dans un ordre strict :

1. Fonction de rappel ;

2. promesse/rendement

3. async / wait (nécessite la compatibilité es5)

4. Présentation de la bibliothèque async.js ;

Answer 2

js est monothread, c'est-à-dire qu'une fois une exécution terminée, la suivante est exécutée.
Les petites instructions et les instructions à exécution rapide sont exécutées de haut en bas, telles que les deux fonctions que vous avez mentionnées. il ne s'exécutera pas dans l'ordre de haut en bas.
La solution est celle indiquée dans la réponse de l'ami ci-dessus.
Le moyen le plus simple est d'écrire une fonction de rappel, qui est également la méthode la plus couramment utilisée. Le but est de contrôler l'ordre d'exécution de deux fonctions

.

La fonction b est passée à la fonction a sous la forme d'un paramètre, puis la fonction b est appelée fonction de rappel.
b est placé à la fin de a. Une fois a exécuté, b
et ci-dessus seront à nouveau exécutés

.

Answer 3

Vous exécutez d'abord le code suivant
Vous utilisez jquery ready puis exécutez le code 1