并发的解决

当调用一个方法时，可能存在按钮无数次点击或者其他原因，导致调用的JS方法执行多次，有以下解决思路：

• 按钮调用JS，当第一次调用时将按钮设为不可用，执行完成后再释放
• 设置一个全局变量来控制

<button onclick="myFunction()">测试</button>
<script>
var IsShow=true;
function myFunction(){
    if(this.IsShow){
        this.IsShow=false;
        //do something
        this.IsShow=true;
    }
}
</script>

• 利用setTimeout来控制，每隔1秒执行函数，在方法执行时先判断timeout，如果执行完调用clearTimeout() 方法取消由 setTimeout() 方法设置的timeout

<button onclick="myFunction()">测试</button>
<script>
var timeId;
function myFunction(){
   if(timeId){
       clearTimeout(timeId);
   }
   timeId=setTimeout(() => {
       //do something
   }, 1000);
}
</script>

但是如果是外部JS文件，我们无法设置全局变量时，可以将函数本身看做对象，附加属性

<button onclick="myFunction()">测试</button>
<script>
function myFunction(){
    if(myFunction.timeId){
        clearTimeout(myFunction.timeId);
    }
    myFunction.timeId=setTimeout(() => {
        //do something
    }, 1000);
}
</script>

异步的解决方法

在JS处理时经常遇到这种情况：两个方法都对某个字段或对象操作，这时候需要等待第一个执行完才可以执行第二个方法，有以下思路可以解决：

• 并行改为串行
• AJAX调用接口改为同步方法
• 回调

async2();
function async1(){
    //do something
}
function async2(){
    //do something
    async1();
}

• 回调计数

var count = 0;
function async1(){
    //do sth...
    callback();
}
function async2(){
    //do sth...
    callback();
}
function callback(){
    count++;
    if(2==count) 
        console.log('执行结束);
}

• 循环阻塞

var count= 0;
function async1(){
    //do sth...
    count++;
}
function async2(){
    //do sth...
    count++;
}
while(count>=2){
    console.log("执行结束")
}