問題：
一個按鈕點擊後執行的異步操作，返回時間不一定，可能會導致多次重複點擊。 例：
<!DOCTYPE html>
<html>
<body >
<button onclick="test()" >點擊</button>
</body>
<script>
function test(){
console.log('a click')
setTimeout( ()=>{
alert("123")
},500)
}
</script>
</html>
多次點擊會導致有多個alert
解：
編寫一個公共的節流函數，使方法在一段時間內最多調用一次
<!DOCTYPE html>
<html>
<style>
</style>
<body >
<button onclick="warp_test()" >點擊</button>
</body>
<script>
const throttle = (func,wait) =>{
let context, args , prevArgs, argsChanged,result;
let previous = 0
console.log(123);
return function (){
let now,remainning;
if(wait){
now = Date.now();
remaining = wait - (now - previous);
}
context = this;
args = arguments;
argsChanged = JSON.stringify(args) != JSON.stringify(prevArgs)
prevArgs = {...args}
if(argsChanged || wait && (remaining <=0 || remaining > wait)){
if(wait){
previous = now ;
}
result = func.apply(context,args);
context = args = null;
}
return result
}
}
function test(){
console.log('a click')
setTimeout( ()=>{
alert("123")
},500)
}
const warp_test = throttle(test,500)
</script>
</html>
另：如果嚴格串行調用可以設置標記位，當異步請求開始時，設置爲1（下次的點擊不進行請求），結束後設置爲0（下次的點擊進行請求）