并发的解决
当调用一个方法时，可能存在按钮无数次点击或者其他原因，导致调用的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("执行结束")
}
