浼楁墍鍛ㄧ煡锛宖unctionthrottle鏄疛S涓潪甯稿父瑙佺殑涓€绉嶄紭鍖栨柟寮忥紝鍙互鏈夋晥闃叉鍑芥暟鎵ц杩囦簬棰戠箒銆傛杩庡叧娉ㄦ垜鐨勫叕浼楀彿锛氬墠绔ぇ渚︽帰渚嬪锛氫竴涓繚瀛樻寜閽紝涓轰簡閬垮厤閲嶅鎻愪氦鎴栬€呮湇鍔″櫒鐨勮€冭檻锛屽線寰€闇€瑕佸鐐瑰嚮琛屼负杩涜涓€瀹氱殑闄愬埗锛屾瘮濡傛瘡300ms鍙厑璁告彁浜や竴娆★紝鍦ㄨ繖涓綋鏃舵垜鎯冲ぇ閮ㄥ垎鍚屽浼氱洿鎺ュ湪缃戜笂澶嶅埗涓€涓猼hrottle鍑芥暟锛屾垨鑰呯洿鎺ュ紩鐢╨odash宸ュ叿搴揵tn.addEventListener('click',_.throttle(save,300))鍏跺疄闄や簡JS鏂规硶锛孋SS涔熷彲浠ュ緢杞绘澗鐨勫疄鐜拌繖鏍风殑鍔熻兘锛屼笉鐢ㄧ湅鐪嬩粈涔堟鏋跺簱1.CSS瀹炵幇鎬濊矾鍒嗘瀽CSS瀹炵幇鎬濊矾鍜孞S鏄笉涓€鏍风殑锛屾墍浠ラ渶瑕佹崲涓搴︽潵鐪嬭繖涓棶棰樸€傛瘮濡傝繖閲岄渶瑕侀檺鍒剁偣鍑讳簨浠讹紝涔熷氨鏄鐢ㄧ偣鍑讳簨浠躲€傝€冭檻濡備綍绂佺敤璇ヤ簨浠躲€傛槸鐨勶紝瀹冩槸鎸囬拡浜嬩欢锛涚劧鍚庢湁鏃堕棿闄愬埗銆傛瘡娆＄偣鍑诲悗闇€瑕佽嚜鍔ㄥ叧闂?00ms銆傛椂闂寸粡杩囨仮澶嶄箣鍚庯紝閭ｄ箞锛屼笌鏃堕棿鍜岀姸鎬佹仮澶嶇浉鍏崇殑鐗规€ф湁鍝簺鍛紵娌￠敊锛屽氨鏄姩鐢伙紱鍙﹀锛岃繕闇€瑕佹湁涓€涓Е鍙戞椂鏈猴紝杩欓噷鏄偣鍑昏涓猴紝鎵€浠ヨ偗瀹氬拰浼被锛歛ctive鏈夊叧銆傛墍浠ョ患鍚堝垎鏋愶紝瀹炵幇杩欐牱鐨勫姛鑳介渶瑕乸ointer-events銆乤nimation鍜?active锛岄偅涔堣繖浜涙€濊矾鎬庝箞涓茶仈璧锋潵鍛紵鎯?绉掆€︹€︷煠旔煠旔煠斾綘鎯冲ソ浜嗗悧锛燄煉○煉○煉″叾瀹炶繖绉嶅満鏅彲浠ョ悊瑙ｄ负CSS鍔ㄧ敾鐨勬帶鍒躲€傛瘮濡傛湁涓€涓姩鐢绘帶鍒舵寜閽紝浠巇isabled->clickable鍙樺寲锛屾瘡娆＄偣鍑婚兘閲嶆柊鎵ц鍔ㄧ敾銆傚湪鎵ц杩囩▼涓紝涓€鐩村浜庣鐢ㄧ姸鎬侊紝鏄惁杈惧埌浜嗏€滆妭娴佲€濈殑鏁堟灉锛熸帴涓嬫潵鐪嬪叿浣撳疄鐜?.CSS鍔ㄧ敾鐨勭簿鍑嗘帶鍒跺亣璁炬湁涓€涓寜閽紝瀹冪粦瀹氫簡涓€涓偣鍑讳簨浠?buttononclick="console.log('Save')">Save澶勮繖娆¤繛缁偣鍑绘寜閽氨浼氳繛缁Е鍙戯紝鏁堟灉濡備笅瀹氫箟涓€涓叧浜巔ointer-events鐨勫姩鐢伙紝鏆備笖鍛藉悕涓簍hrottle@keyframesthrottle{from{pointer-events:none;}鍒皗鎸囬拡浜嬩欢锛氬叏閮紱寰堢畝鍗曪紝灏辨槸Changefromdisabledtoclickable銆傛帴涓嬫潵锛屽皢姝ゅ姩鐢荤粦瀹氬埌鎸夐挳銆傝繖閲屼负浜嗘祴璇曟柟渚匡紝鍔ㄧ敾璁剧疆涓?sbutton{animation:throttle2sstep-endforwards;}娉ㄦ剰鍔ㄧ敾鐨別asing鍑芥暟璁剧疆涓簊tepcurve,step-end锛屽彲浠ユ柟渚跨殑鎺у埗鍙樺寲鎸囬拡浜嬩欢鐨勬椂闂寸偣銆傛湁鍏磋叮鐨勫彲浠ュ弬鑰冭繖绡囨枃绔狅細娣卞叆浠嬬粛CSS3鍔ㄧ敾灞炴€т腑鐨剆teps鍑芥暟绗﹀彿芦寮犻懌鏃?閼┖闂?閼敓娲?zhangxinxu.com)濡備笅鍥撅紝pointer-events鐨勫彇鍊?~2绉掑唴鏄痭one锛屼竴鍒?绉掑氨绔嬮┈鍙樻垚all銆傛棦鐒舵槸鍓嶉攱锛屽氨浼氫竴鐩翠繚鎸佸湪鎵€鏈変汉鐨勭姸鎬併€傛渶鍚庯紝鐐瑰嚮鏃堕噸鏂版墽琛屽姩鐢汇€傛寜涓嬫椂鍙渶瑕佸皢鍔ㄧ敾璁剧疆涓烘棤鍗冲彲銆傝繖涓妧宸у湪涔嬪墠鐨勬枃绔犱腑鏈夋洿璇︾粏鐨勪粙缁嶏細CSS瀹炵幇鎸夐挳鐐瑰嚮鍔ㄧ敾濂楄矾濡備笅@keyframesthrottle{from{color:red;鎸囬拡浜嬩欢锛氭棤锛泒鑷硔棰滆壊锛氱豢鑹诧紱鎸囬拡浜嬩欢锛氬叏閮紱}}鐜板湪锛屽鏋滄枃鏈负绾㈣壊锛屽垯琛ㄧず瀹冨凡绂佺敤锛屽彧鏈夊綋瀹冧负缁胯壊鏃讹紝鎵嶈〃绀哄彲浠ュ崟鍑汇€傚緢娓呮锛屽涓嬶細鏈€鍚庣偣鍑绘瘮杈冩晥鏋滐紝寰堝ソ鐨勯檺鍒朵簡鐐瑰嚮棰戠巼銆傚畬鏁寸殑浠ｇ爜濡備笅锛屽氨閭ｄ箞鍑犺銆傚鏋滈渶瑕佹洿鏀归檺鍒舵椂闂达紝鍙渶鏇存敼鍔ㄧ敾鏃堕棿鍗冲彲銆俠utton{animation:throttle2sstep-endforwards;}button:active{animation:none;}@keyframesthrottle{from{pointer-events:none;}鍒皗鎸囬拡浜嬩欢锛氬叏閮紱}}鎮ㄨ繕鍙互鏌ョ湅浠ヤ笅浠讳綍涓€涓摼鎺ワ細CSSthrottle(runjs.work)涓夈€丆SS瀹炵幇鐨勫叾浠栨€濊矾杩樿寰椾笂涓€绡囨枃绔犲悧锛熶綘杩樺湪鐢ㄥ畾鏃跺櫒鍚楋紵浣跨敤CSS鐩戝惉浜嬩欢鍊熺敤杩欎釜鎬濊矾锛屼篃鍙互杞绘澗瀹炵幇鑺傛祦鐨勬晥鏋溿€備负浜嗘洿濂界殑浣撻獙锛屾偍鍙互浣跨敤鐪熸鐨勬寜閽潵绂佺敤btn.disabled=true銆傚叿浣撴€濊矾鏄繖鏍风殑銆備娇鐢?active瑙﹀彂transition鍙樺寲锛岀劧鍚庨€氳繃鐩戝惉transition鍥炶皟鍔ㄦ€佽缃寜閽殑disabled鐘舵€併€傚畾涔変竴涓寜閽涓嬫棤鎰忎箟鐨勮繃娓″睘鎬э紝渚嬪opacitybutton{opacity:.99;杩囨浮锛氫笉閫忔槑搴?s锛泒鎸夐挳锛氫笉锛堬細绂佺敤锛夛細娲诲姩{涓嶉€忔槑搴︼細1锛泃ransition:0s;}鐒跺悗鐩戝惉transition鐨勫垵濮嬪洖璋?/transitionstartsdocument.addEventListener('transitionstart',function(ev){ev.target.disabled=true})//transitionenddocument.addEventListener('transitionend',function(ev){ev.target.disabled=false})杩欐牱鍋氭渶澶х殑濂藉鏄繖閮ㄥ垎绂佺敤閫昏緫涓庝笟鍔￠€昏緫瀹屽叏瑙ｈ€︺€傞殢鏃堕殢鍦板彲浠ユ棤缂濊闂紝涓嶅彈妗嗘灦鍜岀幆澧冪殑褰卞搷銆傛晥鏋滃涓嬨€傚畬鏁寸殑浠ｇ爜涔熷彲浠ュ湪浠ヤ笅浠讳竴閾炬帴鏌ョ湅锛欳SSthrottledisabled(runjs.work)4.缁间笂鎵€杩帮紝CSS鐨勪笂杩版€濊矾瀹炵幇浜嗙被浼尖€滆妭娴佲€濈殑鍔熻兘銆備笌JS瀹炵幇鐩告瘮锛屽疄鐜版洿绮剧畝锛屾洿鏄撲笂鎵嬶紝鏃犳鏋堕檺鍒躲€傛€荤粨涓€涓嬪疄鐜拌鐐癸細鍑芥暟鑺傛祦鏄竴绉嶅緢甯歌鐨勪紭鍖栨柟娉曪紝鍙互鏈夋晥鐨勯槻姝㈠嚱鏁版墽琛岃繃浜庨绻併€侰SS鐨勫疄鐜版€濊矾鍜孞S涓嶄竴鏍枫€傚叧閿槸鎵惧埌涓庡満鏅叧鑱旂殑灞炴€с€傚氨鏄帶鍒朵竴涓姩鐢荤殑绮剧‘鎺у埗銆傚亣璁炬湁涓€涓姩鐢绘帶鍒舵寜閽粠绂佺敤->鍙偣鍑汇€傛瘡娆＄偣鍑伙紝鍔ㄧ敾閮戒細閲嶆柊鎵ц銆傚湪鎵ц杩囩▼涓紝瀹冨缁堝浜庣鐢ㄧ姸鎬併€傝妭娴佺殑鏁堟灉涔熷彲浠ラ€氳繃transition鐨勫洖璋冨嚱鏁板姩鎬佽缃寜閽殑disabled鐘舵€併€傝繖绉嶅疄鐜扮殑濂藉鏄鐢ㄩ€昏緫鍜屼笟鍔￠€昏緫瀹屽叏瑙ｈ€︺€備笉杩囪繖绉嶅疄鐜版柟寮忚繕鏄瘮杈冨眬闄愶紝浠呴檺浜庣偣鍑昏涓猴紝鍍忓緢澶氭椂鍊欙紝鍙兘浼氬湪婊氬姩浜嬩欢鎴栬€呴敭鐩樹簨浠朵笂浣跨敤鑺傛祦锛岃€岃繖浜涘満鏅兘鍙互鐢ㄤ紶缁熺殑鏂瑰紡鏉ュ疄鐜般€傛渶鍚庯紝濡傛灉瑙夊緱瀵逛綘鏈夊ソ澶勫拰甯姪锛屾杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺?/p>
