当前位置: 首页 > Web前端 > JavaScript

JS是如何实现“在最后一个操作完成之前禁止新的操作”的逻辑

时间:2023-03-27 11:03:28 JavaScript

鐩镐俊寰堝浜洪兘閬囧埌杩囩被浼肩殑鍦烘櫙锛氫娇鐢ㄦ煇涓寜閽彂閫佽姹傦紝闇€瑕佷竴娈垫椂闂存潵澶勭悊銆備絾鏄紝鍦ㄥ鐞嗚繃绋嬩腑锛岀敤鎴风粡甯告湁鎰忔棤鎰忓湴鐐瑰嚮澶氭锛屾墍浠ユ垜浠笇鏈涘湪澶勭悊瀹屾渶鍚庝竴涓姹備箣鍓嶏紝涓嶈鍐嶅彂鍑烘柊鐨勮姹傘€?銆佸垵姝ヨВ鍐虫柟妗堬細鐗规畩浜嬩欢鐗规畩澶勭悊鈥滅壒娈婁簨浠剁壒娈婂鐞嗏€濇槸鎸囨瘡娆¢亣鍒拌繖鏍风殑鍦烘櫙锛屼笓闂ㄥ啓涓€娈甸€昏緫鏉ュ鐞嗭細document.addEventListener('click',(()=>{letlock=false;return()=>{if(lock)return;lock=true;console.log('clicked');//浣跨敤寤惰繜鏉ユ柟渚挎祴璇晄etTimeout(()=>{lock=false;},Math.random()*4e3)}})());2.鍩轰簬绾﹀畾鍥炶皟鐨勬潯浠跺洖璋冨嚱鏁颁笂闈㈢殑鍐欐硶鍏跺疄骞朵笉楹荤儲锛屼絾鏄繖绉嶆潯浠堕檺鍒惰兘涓嶈兘闂潰璇曞畼鎽囦竴鎽団€濓紝鐢ㄥ嚱鏁板寘瑁硅捣鏉ヨ兘杈惧埌鏁堟灉鍚楋紵闂鐨勭棁缁撳叾瀹炲湪浜庯細闃叉姈鍜岃妭娴侀渶瑕佽€冭檻鐨勬墽琛屾潯浠舵槸鏃堕棿銆傝繖涓潯浠舵槸鎵€鏈夊姛鑳界殑鈥滃叡鍚岃瑷€鈥濓紝鎵€浠ュ弻鏂规墠鑳借揪鍒拌繖鏍风殑鈥滈粯濂戔€濄€備负浜嗗湪杩欑鍦烘櫙涓嬭揪鍒板悓鏍风殑鏁堟灉锛屽弻鏂归渶瑕佸埢鎰忕害瀹氾細渚嬪锛屾潯浠舵墽琛屽嚱鏁版帴鍙椾竴涓檮鍔犲嚱鏁帮紝鍦ㄩ€傚綋鐨勬椂鍊欒В闄ゆ潯浠堕檺鍒躲€傛潯浠跺嚱鏁帮紙鍥炶皟锛氾紙release锛欶unction锛?..args锛歛ny[]锛?>any锛墈letlock=false;杩斿洖鍑芥暟锛?..args锛氫换浣昜]锛墈濡傛灉锛堥攣瀹氾級杩斿洖锛涢攣=鐪燂紱callback.call(this,()=>{lock=false;},...args);}}馃憜涓轰簡鏂逛究璇存槑鏈害瀹氱殑鍥炶皟瑕佹眰锛岃繖閲岀敤TS浠f浛JS銆備娇鐢ㄦ椂锛歜utton.addEventListener('click',conditioned((release)=>{return()=>{console.log('clicked');setTimeout(()=>{release();//閲婃斁閿亇,Math.random()*4e3);}}));3銆佸熀浜嶱romise鐨勬潯浠跺洖璋冨嚱鏁板鏋滆鏈変粈涔堟柟娉曟瘮鍥炶皟鍑芥暟鏇粹€滀紭闆呪€濆拰鈥滈€氱敤鈥濈殑璇濓紝绛旀鏄剧劧鏄疨romise銆傚洜涓轰笂闈㈢殑鍐欐硶鏀瑰啓浜嗗師鏉ュ洖璋冨嚱鏁扮殑鍙傛暟锛屽鏋滈亣鍒板枩娆trl+C鐨勫垵瀛﹁€咃紝浠栦細鐤戞儜涓轰粈涔堝鍒剁殑鍑芥暟涓嶈捣浣滅敤銆傛潯浠跺嚱鏁?鍥炶皟:(...args:any[])=>Promise){letlock=false;杩斿洖鍑芥暟锛?..args锛氫换浣昜]锛墈濡傛灉锛堥攣瀹氾級杩斿洖锛涢攣=鐪燂紱灏濊瘯{awaitcallback.call(this,...args);閿?鍋囷紱}catch(err){lock=false;鎶涘嚭閿欒锛泒}}濡備綍浣跨敤锛歜utton.addEventListener('click',conditioned(()=>{returnnewPromise((resolve)=>{console.log('clicked');setTimeout(()=>{resolve();//閲婃斁閿亇,Math.random()*4e3);});}));铏界劧涔嶄竴鐪嬶紝浣跨敤杩欎釜鍑芥暟鎰忓懗鐫€鍥炶皟鍑芥暟鐨勮繑鍥炲€煎繀椤婚噸鍐欎负Promise锛屼絾鏄棦鐒惰繖鏍风殑鍦烘櫙寰€寰€鏄紓姝ユ搷浣滐紝閭d负浠€涔堜笉鏀规垚async鍛紵4.Reacthookversionimport{useRef}from'react';functionuseCondition(callback:(...args:any[])=>Promise){constlock=useRef(false);寮傛杩斿洖(...args:any[])=>{if(lock.current)return;lock.current=true;灏濊瘯{绛夊緟鍥炶皟锛?..args锛?lock.current=false}catch(閿欒){lock.current=false;鎶涘嚭閿欒锛泒};}濡備綍浣跨敤锛?buttononClick={useCondition(()=>{returnnewPromise((resolve)=>{console.log('clicked');setTimeout(()=>{resolve();//閲婃斁閿亇,Math.random()*4e3);});})}>娴嬭瘯馃憜娌″疄闄呮祴璇曡繃锛屼笉鐭ラ亾琛屼笉琛?/p>