鍓嶈█锛氶槻鎶栧姛鑳芥槸鏃ュ父寮€鍙戜腑闈炲父闈炲父閲嶈鐨勪竴涓煡璇嗙偣銆傞€氬父锛屽湪鏈€鍒濇瀯寤轰竴涓」鐩殑鏃跺€欙紝閮戒細鍦╱tils鏂囦欢澶逛笅鍑嗗杩欐牱涓€涓姛鑳斤紝涓轰互鍚庡仛鍑嗗銆傦紙tips锛歶tils鍦ㄥぇ澶氭暟缈昏瘧杞欢閲屽ソ鍍忛兘鍙姳鑺卞叕瀛愶紝杩欎釜缈昏瘧涓嶅お鍚堢悊銆傚湪杩欑鍦烘櫙涓嬶紝杩欎釜璇嶆洿鍍忔槸涓€涓瓨鏀惧伐鍏峰姛鑳界殑鏂囦欢澶广€傞€氬父鎴戜滑浼氭斁涓€浜涗笢瑗匡紝姣斿鏍煎紡鍖栨椂闂达紝鏍煎紡鍖栨枃浠跺ぇ灏忔牸寮忋€佽妭娴佺瓑锛夋湰鏂囨棬鍦ㄨ窡鍦ㄩ厤濂楁枃绔犺妭娴佸姛鑳藉浣曞伐浣滀箣鍚庛€備絾鏄綋鏃舵垜瀵归棴鍖呭拰楂橀樁鍑芥暟鐨勬蹇典笉鏄壒鍒竻妤氥€傛€曡瀵艰鑰咃紝鎵€浠ユ妸杩欎釜閲嶈鐨勭煡璇嗙偣鎷栦簡寰堜箙鎵嶅叕甯冦€傛敞锛氭湰鏂囦笉浼氳瑙ｉ槻鎶栫殑杩涢樁鍐欐硶銆傚畠鍙細甯︿綘涓€姝ユ鐞嗘竻鎬濊矾銆傚浣曟墿灞曞姛鑳介渶瑕佷綘浠庝竴涓疄渚嬩腑鎺ㄦ柇鍑哄叾浠栫殑涓滆タ銆?銆佷粈涔堟槸闃叉姈锛熶娇鐢ㄥ満鏅槸浠€涔堬紵棣栧厛鎴戜滑瑕佺煡閬擄紝杩欓噷鐨勯槻鎶栨槸浠€涔堬紵鍋囪涓€涓満鏅紝杩欓噷灏辨嬁鎴戜滑鏃ュ父鐢熸椿涓渶甯哥敤鐨勫姛鑳芥潵璇村惂锛屻€婃悳绱€夋潵涓句緥瀛愩€傛垜浠敤 v-model 鎸囦护缁戝畾杩欎釜 <input> 妗嗐€傜劧鍚庣粦瀹氫竴涓牴鎹敤鎴疯緭鍏ョ殑鍏抽敭璇嶏紝鍘诲悗绔暟鎹簱妫€绱㈡暟鎹殑妯℃嫙鍑芥暟銆傦紙杩欓噷鎴戜滑鐢?console 浠ｆ浛锛夈€傜劧鍚庢垜浠敤 watch 鍘荤洃瑙?searchKeyword 鐨勫彉鍖栵紝姣忓綋鐢ㄦ埛杈撳叆鍏抽敭璇嶅悗锛屾垜浠氨鍚戝悗绔彂璧蜂竴娆¤姹傘€傛垜浠彲浠ラ潪甯告槑鏄剧殑鐪嬪埌锛屽湪杩欑鎯呭喌涓嬨€傛垜浠呬粎鍙槸鎯虫渶鍚庢悳绱?hanzhenfang 杩欏嚑涓叧閿瘝锛屼絾鏄垜鍦ㄨ緭鍏ユ瘡涓€涓瓧绗︾殑鏃跺€欙紝閮戒細鍘诲悗绔姹備竴娆★紝鏁版嵁閲忓皬杩樺ソ锛屽鏋滄暟鎹噺杩囧ぇ鐨勮瘽锛岀敱浜庡墠鍑犳鐨勮姹傞兘鏄鏃犳剰涔夌殑锛屽娍蹇呬細閫犳垚鎬ц兘鍜岃祫婧愪笂鐨勬氮璐广€?.浠€涔堬紵浣犺涓轰粈涔堜笉绛夋渶鍚庣偣鍑绘悳绱㈡寜閽殑鏃跺€欏啀鍘绘悳绱紵 emm... 杩欎釜纭疄鏄彲浠ャ€備絾鏄獊鐒舵湁涓€澶╋紝浜у搧缁忕悊璇达細鈥滆繖涓悳绱㈡濡傛灉鏈夎仈鎯冲姛鑳界殑璇濆氨鏇村ソ浜嗭紒鎴戜滑瑕佽刀瓒呯櫨搴︼紝璧涜繃璋锋瓕锛佲€濅綘鎬庝箞鍔炲槥锛熺洰鍓嶇殑鎯呭喌鍒颁笉鏄笉琛岎煠旓紝灏辨槸鏈夊彲鑳芥尐鍚庣鐨勪竴椤挎瘨鎵擄紙bushi锛夆€?..鏈嶅姟鍣ㄤ负浠€涔堣€佽帿鍚嶆寕鈥漮k锛岀幇鍦ㄥ帇鍔涙潵鍒颁簡鍓嶇杩欒竟銆傛帴鍙ｈ璋冭繕鏄緱璋冿紝浣嗘槸鎴戝笇鏈涗粬鍦ㄦ垜杈撳叆瀹?hanzhenfang 鐨勬椂鍊欙紝鐒跺悗妫€娴嬫垜娌℃湁缁х画寰€涓嬭緭鍏ヤ簡锛屽啀鍘昏皟鍚庣鐨勬帴鍙ｏ紝鐒跺悗鎴戝啀鎶婅繑鍥炵殑鑱旀兂璇嶈仈绯荤粰瀹冨睍绀哄湪杩欓噷鏄笉鏄氨鍙互浜嗗憿锛熶簩.鐞嗘竻鎬濊矾璁╂垜浠浆鍖栦竴涓嬫€濊矾锛屽彧鏄崟绾殑杩欐牱璇翠綘鍙兘涓嶅お鐞嗚В銆傛垜浠崲涓€涓洿涓虹畝鍗曠殑鍦烘櫙銆傜幇鍦ㄩ〉闈㈠彧鏈変竴涓畝鍗曠殑鎸夐挳锛岄€氳繃鐐瑰嚮杩欎釜鎸夐挳锛屾垜浠細鍚戝悗绔彂璧疯姹傘€傦紙杩欑鍦烘櫙鎴戠煡閬撴湁寰堝鍒殑闄愬埗鏂规硶馃毇锛屾瘮濡傚湪鏌愪釜鏃堕棿娈靛唴鎶婃寜閽殑 disabled 灞炴€ф敼涓?true 绛夌瓑锛屾垜浠殏鏃朵笉璁ㄨ杩欑瑙ｅ喅鏂规銆傦級鐜板湪鎴戜滑灏濊瘯鐤媯鐐瑰嚮鎸夐挳灏变細鐤媯鍙戦€佽姹傘€傛垜浠幇鍦ㄦ潵淇敼涓€涓嬭繖涓嚱鏁帮紝鎴戜滑鎬濊€冧竴涓嬸煠旓紝鍋囪鎴戜滑涓嶅€熷姪 debounce 鍙互瀹炵幇涓€涓吉闃叉姈鐨勫姛鑳藉悧锛熺瓟妗堟槸鐧惧垎鐧惧彲浠ョ殑銆傛垜浠厛鍦ㄨ繖涓枃浠朵笅璁惧畾涓€涓暟瀛楃被鍨嬬殑鍙橀噺鍙仛 timerID銆傜◢鍚庢垜浼氬憡璇変綘涓轰粈涔堟槸鏁板瓧绫诲瀷鐨勩€傦紙tips:鍏跺疄涔熶笉鏄壒鍒渶瑕侀檺鍒剁被鍨?null 杩欎簺鐨勪篃鍙互锛夌劧鍚庢垜浠瀹氫竴涓畾鏃跺櫒锛屾潵浣胯繖涓?console.log("鍙戣姹?quot;) 鍦?1.5s 鍚庢墽琛屻€傛垜鎷呭績涓埆璇昏€呭銆?setTimeout 鏄湁杩斿洖鍊肩殑銆嬫垜涔熶笉鏄緢浜嗚В銆傝鎴戠┛鎻掕В閲婁竴涓嬩綘鍙兘涓嶇煡閬撶殑浜嬫儏銆傚疄闄呬笂锛宻etTimeout鍦ㄦ墽琛屾椂浼氳繑鍥炰竴涓ぇ浜?鐨勬鏁存暟銆傛墍浠ユ垜浠繖鍙ヨ瘽瀹為檯涓婃槸缁檛imerID璧嬪€硷紒鑰屼笉鏄皢setTimeout鍑芥暟鏈韩鍒嗛厤缁檛imerID鍙橀噺銆傗殸锔忔敞鎰忥細鍏ㄦ枃鐨勯噸鐐规槸涓嬮潰杩欏彞璇濓細杩欓噷闇€瑕佺壒鍒槑纭殑鏄紝setTimout鍑芥暟鏈韩鎵ц鐨勬椂鍊欙紝鏄珛鍗宠祴鍊肩殑锛屼笉鏄?.5s涔嬪悗銆傛垜甯屾湜浣犲璇诲嚑鍙ヨ繖鍙ヨ瘽锛岀‘淇濅綘鐞嗚В杩欎釜姒傚康锛佽繖鎰忓懗鐫€浠€涔堬紵鎴戣缃簡涓€涓姛鑳斤紝澶х害鍦?0骞村悗鎵ц銆備笉瑕佷互涓簍imerID浼氬湪10骞村悗璧嬪€笺€備粈涔堬紵浣犱笉鐩镐俊锛熸垜鏉ョ粰浣犲睍绀恒€備负浠€涔堣杩欐牱璁捐锛熷洜涓哄鏋滆繖鏍峰疄鏂界殑璇濓紝浼氱粰鎴戜滑涓€涓弽鎮旂殑鏈轰細銆傚啀璇翠笂闈㈢殑渚嬪瓙銆傚亣璁炬垜绐佺劧鍚庢倲涓嶆兂鍦?骞村悗鎵ц銆傛垜鍙渶瑕佸彇娑堣繖涓猼imerID灏卞彲浠ヤ腑閫旀斁寮冩墽琛屼簡銆傝鎴戜滑鍐欎竴涓猚ancelSearch鍑芥暟锛屽畠闈炲父绠€鍗曘€傛槸璋冪敤clearTimout鍙栨秷瀹氭椂鍣ㄧ殑鏂规硶锛屾垜浠缃畾鏃跺櫒鐨勫欢鏃朵负3s銆傛紨绀猴細鍙互娓呮鐨勭湅鍒版垜鐨勫墠涓や釜璇锋眰閮借鎴戞垚鍔熷睆钄戒簡銆傜涓夋锛屽洜涓烘垜娌℃湁鐐瑰彇娑堬紝3s鍚庡畠姝ｇ‘鐨勫府鎴戞墽琛屼簡getSearch鍑芥暟銆傝仾鏄庣殑浣犲彲鑳戒細鎯冲埌锛岃繖涓猼imerID灏辨槸姣忎竴涓猻etTimeout鐨勮韩浠借瘉銆傛瘡娆℃墽琛宻etTimout鏃讹紝setTimout鎺ユ敹鍒扮殑鍥炶皟鍑芥暟閮戒細鍒嗛厤涓€涓敮涓€鐨処D鏀惧叆浠诲姟闃熷垪涓€傛敞鎰忥紒锛侊紒涓€鏃︿换鍔℃垚鍔熶粠浠诲姟闃熷垪涓帹閫佸埌涓荤嚎绋嬫墽琛岋紝鍞竴id鍏跺疄娌℃湁澶氬ぇ鎰忎箟銆俢learTimeout鐨勪綔鐢ㄥ氨鏄竻闄や换鍔￠槦鍒椾腑鎸囧畾id缁戝畾鐨勫洖璋冨嚱鏁般€?.瀹炵幇涓€涓畝鍗曠殑鑷ǔ瀹氬姛鑳藉熀浜庝互涓婂墠鎻愮煡璇嗭紝鎴戜滑鍙互瀹炵幇涓€涓潪甯哥畝鍗曠殑鑷ǔ瀹氬姛鑳姐€傛帴涓嬫潵锛屾垜鏁寸悊涓€涓嬫€濊矾銆傚湪鎴戜滑姣忔鎵цgetSearch涔嬪墠锛屽鏋滃綋鍓嶄换鍔￠槦鍒椾腑鏈夊拰涓婃鐩稿悓鐨勪换鍔★紝鎴戜滑浼氬厛娓呴櫎瀹冦€傜劧鍚庡惎鍔ㄤ竴涓畾鏃跺櫒浠诲姟鏉ユ帹杩涗换鍔￠槦鍒椼€傝嚦姝ゆ垜浠嚜宸卞疄鐜颁簡涓€涓畝鍗曠殑闃叉姈鍔熻兘銆備负浜嗘祴璇曪紝鍦ㄦ涔嬪墠鎴戜滑璁剧疆浜嗕竴涓彉閲忔潵缁熻鎴戜滑鐐瑰嚮鎸夐挳鐨勬鏁帮紝杩欎釜鍑芥暟鍙槸涓轰簡璁℃暟銆傛垜浠潵娴嬭瘯涓€涓嬶細4.debounce鍔熻兘鐨勫疄鐜板鏋滄垜浠彧鏈変竴涓姛鑳介渶瑕侀槻鎶栵紝鐪嬭捣鏉ヨ繕鍙互锛屼絾鏄幇鍦ㄦ湁10涓€?00涓姛鑳斤紵鎴戝簲璇ヨ繖鏍峰啓鍚楋紵涓嶄笉涓嶏紝绋嬪簭鍛樻槸寰堟噿鎯扮殑~涓嶅彲鑳藉啓鍑洪噸澶嶇殑浣庤川閲忎唬鐮併€傛墍浠ュ鏋滀綘鑱槑鐨勮瘽锛屼綘鍙兘浼氭兂鍒板啓涓€涓骇鐢熻嚜绋冲畾鍑芥暟鐨勫嚱鏁般€傛病閿欙紝瀵艰嚧鎴戜滑浠婂ぉ鐨勪富瑙掑幓鎶栥€傚ソ浜嗭紝閾哄灚浜嗚繖涔堜箙锛岃鏁蹭唬鐮佷簡銆傛垜浠厛鍦╱tils鏂囦欢澶逛笅鏂板缓涓€涓猟ebounce.ts鏂囦欢鏉ユ斁鎴戜滑鐨刣ebounce鍑芥暟銆傞【鍚嶆€濅箟銆傚洜涓哄畠鏄竴涓寘瑁呭嚱鏁帮紝鎵€浠ヤ綘蹇呴』缁欏畠涓€浜涗笢瑗匡紝杩欐牱瀹冩墠鑳戒负浣犲寘瑁呫€傞偅涔堣繖涓嚱鏁板簲璇ユ帴鍙椾竴涓弬鏁帮紝杩欎釜鍙傛暟涔熷簲璇ユ槸涓€涓嚱鏁般€傦紙鍚庨潰闇€瑕佹妸鎴戜滑涓婇潰鍐欑殑璇锋眰鍚庣鐨勫嚱鏁皌oSearch鍑芥暟鏀惧埌閲岄潰銆傦級鐒跺悗鍦╠ebounce鍑芥暟涓畾涔変竴涓眬閮ㄥ彉閲弔imeID锛岀敤鏉ュ瓨鏀惧悗闈㈠畾鏃跺櫒杩斿洖鐨勮韩浠借瘉id銆傗殸锔忔敞鎰忥細鎺ヤ笅鏉ユ槸鏈枃鐨勭浜屼釜閲嶇偣銆傝繖閲屾垜浠渶瑕佷娇鐢ㄩ珮闃跺嚱鏁般€傛垜浠厛鐪嬬湅楂橀樁鍑芥暟鐨勫畾涔夋槸浠€涔堛€傚埆鎬曪紝杩欎笉鍍忔槸鏁板鍜岄珮绛夋暟瀛︾殑宸窛锛佸鏋滀綘鏄涓€娆″惉鍒拌繖涓瘝锛屼綘鍙互杩欐牱鐞嗚В锛氬氨鍍忎綘閫佷汉绀肩墿鏃讹紝涓轰簡濂界湅锛屼綘浼氭妸杩欎欢涓滆タ鍖呰寰楀緢婕備寒銆傞偅涔堟垜浠繖閲岀殑闃叉姈鍔熻兘鐨勪綔鐢ㄥ叾瀹炲氨鏄府浣犲寘瑁硅繖涓姛鑳斤紝涓嶄細鐩存帴褰卞搷杩欎釜鍔熻兘鐨勫唴閮ㄩ€昏緫锛屽氨鍍忎綘鐨勭ぜ鐗╁寘瑁逛簡涓€灞傚寘瑁呯焊馃巵涓€鏍凤紝瀹冩湰韬苟娌℃湁鏀瑰彉.鎵€浠ヨ繖閲屾垜浠簲璇ヨ繑鍥炰竴涓嚱鏁版潵瀛樻斁鎴戜滑鐪熸鐨勪笟鍔′唬鐮併€傦紙涓轰簡鍐欏尶鍚嶅嚱鏁版柟渚匡紝涔熷彲浠ュ湪鍑芥暟鍐呴儴浣跨敤function鍏抽敭瀛楀０鏄庝竴涓甫鍚嶅瓧鐨勫嚱鏁版渶鍚庤繑鍥烇紝鏁堟灉鏄竴鏍风殑锛夌劧鍚庣洿鎺ユ妸鎴戜滑瀹炵幇鐨勮嚜绋冲嚱鏁伴噷闈㈢殑閫昏緫澶嶅埗杩囨潵鍦ㄤ笂涓€姝ヤ腑銆傚氨杩欎箞绠€鍗晘鍝︼紝绛変竴涓嬶紝鍒繕浜嗘妸setTimeout涓殑console.log('sendrequest')鏇挎崲鎴愭垜浠殑鍙傛暟fn銆傛帴涓嬫潵鍦╝pp.vue涓紩鍏ヨ繖涓姛鑳姐€?.closure鍜宒ebounce绛夊叧绯伙紝涓嶇敤鎷呭績銆傛垜澶ф鐚滃埌浣犱細杩欐牱浣跨敤瀹冦€傜劧鍚庢嬁鐫€杩欎釜娌℃湁鍙嶅簲鐨勯〉闈㈡€€鐤戜汉鐢熴€傝繖閲岄渶瑕佽鏄庝竴涓嬶紝杩欑鍐欐硶鍦╮eact涓槸鍙互姝ｇ‘鎵ц鐨勩€備富瑕佹槸鏈夊叴瓒ｇ殑璇昏€呭彲浠ヨ嚜琛屾悳绱紝杩樻槸寰堟湁鎰忔€濈殑~鍥炲埌Vue锛岃繕璁板緱鎴戜滑褰撳垵鐨勫啓娉曞悧锛熸垜浠湪杩欎釜缁勪欢涓畾涔変簡涓€涓€婄浉褰撲簬杩欎釜缁勪欢鐨勨€滃叏灞€鍙橀噺鈥濄€嬨€傛墍浠ュ綋鎴戣繖涓〉闈㈡湁澶氫釜鍔熻兘闇€瑕侀槻鎶栫殑鏃跺€欙紝灏变細閫犳垚杩欐牱鐨勫満鏅€傛瀬鍏朵笉浼橀泤涓旈毦浠ョ淮鎶ゃ€傞偅鎴戜滑璇ユ€庝箞鍔炲憿锛熻繖閲屾垜浠渶瑕佺敤鍒伴棴鍖呭嚱鏁般€傞棴鍖呬笉寮€涓€绡囧氨瀹屼簡锛岄槷涓€椋庡拰闃ぇ瀵归棴鍖呯殑璁茶В宸茬粡寰堜笉閿欎簡锛屾垜灏变笉鐬庤浜嗭級瀵逛簬鐜板湪鐨勫満鏅紝鍙互杩欐牱鐞嗚В銆傞棴鍖呯浉褰撲簬鍦ㄨ嚜宸辩殑浣滅敤鍩熷唴锛岄€氳繃鍦ㄥ嚱鏁板唴閮ㄥ紩鐢ㄨ嚜宸辩殑鍙橀噺timerID鏉ヨ揪鍒癲ebounce鍑芥暟鎵ц瀹屼笉浼氱珛鍗抽攢姣佸彉閲弔imeID鐨勭洰鐨勩€傞偅涔堟垜浠纭殑鍐欐硶灏辨槸鐢ㄤ竴涓彉閲忔潵鎺ユ敹debounce杩斿洖鐨勫嚱鏁般€傝€屾鏃跺凡缁忓悓姝ョ敓鎴愪簡涓€涓殏鏃朵笉浼氳閿€姣佺殑timeID锛岀敤浜庝繚瀛樻垜浠瑂etTimeout浜х敓鐨刬d韬唤璇併€傦紙杩欓噷鍙兘涓嶆槸寰堝鏄撶悊瑙ｏ紝闇€瑕佽鑰呰嚜琛屼簡瑙ｅ叧闂満鍒讹級娴嬭瘯涓€涓嬶細鎬荤粨锛氬鏋滆鑰呰兘澶熶粩缁嗕綋浼氭湰鏂囩殑缁嗚妭锛岃嚜鐒惰€岀劧灏变細鏄庣櫧鑺傛祦鐨勫師鐞嗐€備互鍓嶇敤娓告垙鎶€鑳介檷娓煄甫浣犱簡瑙ｈ妭娴佸師鐞嗐€傛湁鍏磋叮鐨勮鑰呭彲浠ヨ嚜琛屾煡鐪媬鐗瑰埆鎰熻阿锛欯鏋楁按钀藉悰@Baoyuan0808鏈€鍚庢劅璋袱浣嶅ぇ浣鏈枃鍐欎綔鐨勬€濊矾鍜屾妧鏈寚瀵笺€傪煄?/p>
