解决js中 alert 单线程执行的问题

 问题描述

        前一段时间遇到问题，项目之间相互调用js。场景如下，系统A的界面点击“预览”按钮，调用系统B的js方法，并弹出系统B的预览界面，系统B的预览界面点击“提交”代码逻辑是1.调用系统A的submit方法 2.关闭自己的页面。那么问题来了，执行第1步的时候，因为系统A   submit方法里面异步调用成功之后，会使用alert弹出提示，而由于js的单线程执行，导致第2步就执行不到，就会出现，预览界面没有关闭，系统A的界面又弹出提示的情况（注：在浏览器使用选项卡打开的时候会出现这个问题）

 

解决方案

       使用setTimeout 延时去调用系统A的submit的方法，这样在系统B的预览界面点击提交的时候，1和2步骤都能够执行到。但是要注意设置延时时间的长短，不可过长，过长会导致用户等待的时间长的问题，用户的体验度就会非常糟糕，过短会导致出现第2步没来得及执行的情况，在我的解决方案中100毫秒的时间刚刚（仅供参考）

 

 

例子

   html代码

 

<span id="test">测试</span>

 

   js代码    

$(function(){
  alertF();
  $("#test").css("color",'red');
})

function alertF() {
  alert(32);
  
}

 

 

    如何做到弹出的同时也改变字体的颜色，这个时候就可以使用setTimeout方法来解决，修改过后的js代码如下

    

$(function(){
  setTimeout("alertF()",100);
  $("#test").css("color",'red');
})

function alertF() {
  alert(32);
  
}