[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fteam-documents\u002F18":3,"knowledge-related-\u002Fknowledge\u002Fteam-documents\u002F18":1210,"knowledge-series-\u002Fknowledge\u002Fteam-documents\u002F18":1236},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":15,"pinned":16,"draft":16,"body":17,"seo":1206,"stem":1207,"id":1208,"extension":1209},"\u002Fknowledge\u002Fteam-documents\u002F18","中英文输入法下搜索触发冲突复盘","在“边输入边查询”场景中，很多实现会直接在 input 事件中请求接口。 但在中文输入法（IME）场景下，如果不处理输入合成过程，容易出现“未完成输入就提前触发查询”的问题。","团队文档",[12,13,14],"team","vue","input","2024-09-01",false,{"type":18,"value":19,"toc":1191},"minimark",[20,23,35,39,42,59,62,71,82,85,88,107,113,115,118,125,128,151,168,170,173,523,525,528,538,542,549,553,559,562,566,573,999,1002,1085,1094,1097,1133,1136,1176,1179,1187],[21,22,8],"h1",{"id":8},[24,25,26,27,30,31,34],"p",{},"在“边输入边查询”场景中，很多实现会直接在 ",[28,29,14],"code",{}," 事件中请求接口。",[32,33],"br",{},"\n但在中文输入法（IME）场景下，如果不处理输入合成过程，容易出现“未完成输入就提前触发查询”的问题。",[36,37,38],"h2",{"id":38},"场景说明",[24,40,41],{},"本问题主要出现在 PC 端搜索输入框（如手机号关联单查询）：",[43,44,45,53,56],"ul",{},[46,47,48,49,52],"li",{},"需求是实时查询，不适合仅用 ",[28,50,51],{},"blur\u002Fchange"," 触发；",[46,54,55],{},"同时又要避免高频请求和无效请求；",[46,57,58],{},"还要兼容不同输入法行为差异（尤其是 Windows 自带输入法）。",[36,60,61],{"id":61},"问题现象",[24,63,64,65,67,68,70],{},"当使用部分中文输入法时，",[28,66,14],{}," 事件会在“拼音尚未上屏完成”阶段触发。",[32,69],{},"\n这会导致：",[43,72,73,76,79],{},[46,74,75],{},"请求参数包含中间态字符或特殊符号；",[46,77,78],{},"接口被频繁无效调用；",[46,80,81],{},"甚至在后端触发异常校验错误。",[83,84],"hr",{},[36,86,87],{"id":87},"事件差异说明",[43,89,90,95,101],{},[46,91,92,94],{},[28,93,14],{},"：输入值变化即触发，实时性最好；",[46,96,97,100],{},[28,98,99],{},"change","：通常在输入结束并失焦后触发；",[46,102,103,106],{},[28,104,105],{},"blur","：失焦即触发，不关心内容是否变化。",[24,108,109,110,112],{},"对于实时搜索，",[28,111,14],{}," 仍是首选，但必须结合输入法合成事件处理。",[83,114],{},[36,116,117],{"id":117},"解决方案",[24,119,120,121,124],{},"推荐方案：",[28,122,123],{},"input + throttle + compositionstart\u002Fcompositionend","。",[24,126,127],{},"处理原则：",[129,130,131,142,148],"ol",{},[46,132,133,134,137,138,141],{},"输入合成期间（",[28,135,136],{},"compositionstart"," 到 ",[28,139,140],{},"compositionend","）不发请求；",[46,143,144,145,147],{},"合成结束后恢复 ",[28,146,14],{}," 请求；",[46,149,150],{},"请求层增加节流，控制并发压力。",[24,152,153,154,156,162,164],{},"参考事件文档：",[32,155],{},[157,158,136],"a",{"href":159,"rel":160},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FAPI\u002FElement\u002Fcompositionstart_event",[161],"nofollow",[32,163],{},[157,165,140],{"href":166,"rel":167},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FAPI\u002FElement\u002Fcompositionend_event",[161],[83,169],{},[36,171,172],{"id":172},"示例代码",[174,175,180],"pre",{"className":176,"code":177,"language":178,"meta":179,"style":179},"language-javascript shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F isComposing: 是否处于输入法合成阶段\nlet isComposing = false;\n\ngetOrderDemo\n  .on(\n    \"input\",\n    throttle(function () {\n      \u002F\u002F 合成中不触发查询\n      if (isComposing) return;\n\n      const val = $(this)\n        .val()\n        .replace(\u002F\\s|\\r|\\t|\\n\u002Fg, \"\");\n\n      \u002F\u002F ... 执行查询逻辑\n    }, 500)\n  )\n  .on(\"compositionstart\", function () {\n    \u002F\u002F 开始拼音\u002F输入法合成\n    isComposing = true;\n  })\n  .on(\"compositionend\", function () {\n    \u002F\u002F 合成结束，恢复查询\n    isComposing = false;\n  });\n","javascript","",[28,181,182,191,214,221,227,240,256,274,280,302,307,332,344,394,399,405,417,423,447,453,466,474,497,503,514],{"__ignoreMap":179},[183,184,187],"span",{"class":185,"line":186},"line",1,[183,188,190],{"class":189},"sutJx","\u002F\u002F isComposing: 是否处于输入法合成阶段\n",[183,192,194,198,202,206,210],{"class":185,"line":193},2,[183,195,197],{"class":196},"sbsja","let",[183,199,201],{"class":200},"su5hD"," isComposing ",[183,203,205],{"class":204},"smGrS","=",[183,207,209],{"class":208},"syTEX"," false",[183,211,213],{"class":212},"sP7_E",";\n",[183,215,217],{"class":185,"line":216},3,[183,218,220],{"emptyLinePlaceholder":219},true,"\n",[183,222,224],{"class":185,"line":223},4,[183,225,226],{"class":200},"getOrderDemo\n",[183,228,230,233,237],{"class":185,"line":229},5,[183,231,232],{"class":212},"  .",[183,234,236],{"class":235},"sGLFI","on",[183,238,239],{"class":200},"(\n",[183,241,243,247,250,253],{"class":185,"line":242},6,[183,244,246],{"class":245},"sjJ54","    \"",[183,248,14],{"class":249},"s_sjI",[183,251,252],{"class":245},"\"",[183,254,255],{"class":212},",\n",[183,257,259,262,265,268,271],{"class":185,"line":258},7,[183,260,261],{"class":235},"    throttle",[183,263,264],{"class":200},"(",[183,266,267],{"class":196},"function",[183,269,270],{"class":212}," ()",[183,272,273],{"class":212}," {\n",[183,275,277],{"class":185,"line":276},8,[183,278,279],{"class":189},"      \u002F\u002F 合成中不触发查询\n",[183,281,283,287,291,294,297,300],{"class":185,"line":282},9,[183,284,286],{"class":285},"sVHd0","      if",[183,288,290],{"class":289},"skxfh"," (",[183,292,293],{"class":200},"isComposing",[183,295,296],{"class":289},") ",[183,298,299],{"class":285},"return",[183,301,213],{"class":212},[183,303,305],{"class":185,"line":304},10,[183,306,220],{"emptyLinePlaceholder":219},[183,308,310,313,317,320,323,325,329],{"class":185,"line":309},11,[183,311,312],{"class":196},"      const",[183,314,316],{"class":315},"s_hVV"," val",[183,318,319],{"class":204}," =",[183,321,322],{"class":235}," $",[183,324,264],{"class":289},[183,326,328],{"class":327},"s39Yj","this",[183,330,331],{"class":289},")\n",[183,333,335,338,341],{"class":185,"line":334},12,[183,336,337],{"class":212},"        .",[183,339,340],{"class":235},"val",[183,342,343],{"class":289},"()\n",[183,345,347,349,352,354,357,361,364,367,369,372,374,377,379,383,386,389,392],{"class":185,"line":346},13,[183,348,337],{"class":212},[183,350,351],{"class":235},"replace",[183,353,264],{"class":289},[183,355,356],{"class":245},"\u002F",[183,358,360],{"class":359},"stzsN","\\s",[183,362,363],{"class":204},"|",[183,365,366],{"class":359},"\\r",[183,368,363],{"class":204},[183,370,371],{"class":359},"\\t",[183,373,363],{"class":204},[183,375,376],{"class":359},"\\n",[183,378,356],{"class":245},[183,380,382],{"class":381},"sw1J6","g",[183,384,385],{"class":212},",",[183,387,388],{"class":245}," \"\"",[183,390,391],{"class":289},")",[183,393,213],{"class":212},[183,395,397],{"class":185,"line":396},14,[183,398,220],{"emptyLinePlaceholder":219},[183,400,402],{"class":185,"line":401},15,[183,403,404],{"class":189},"      \u002F\u002F ... 执行查询逻辑\n",[183,406,408,411,415],{"class":185,"line":407},16,[183,409,410],{"class":212},"    },",[183,412,414],{"class":413},"srdBf"," 500",[183,416,331],{"class":200},[183,418,420],{"class":185,"line":419},17,[183,421,422],{"class":200},"  )\n",[183,424,426,428,430,432,434,436,438,440,443,445],{"class":185,"line":425},18,[183,427,232],{"class":212},[183,429,236],{"class":235},[183,431,264],{"class":200},[183,433,252],{"class":245},[183,435,136],{"class":249},[183,437,252],{"class":245},[183,439,385],{"class":212},[183,441,442],{"class":196}," function",[183,444,270],{"class":212},[183,446,273],{"class":212},[183,448,450],{"class":185,"line":449},19,[183,451,452],{"class":189},"    \u002F\u002F 开始拼音\u002F输入法合成\n",[183,454,456,459,461,464],{"class":185,"line":455},20,[183,457,458],{"class":200},"    isComposing",[183,460,319],{"class":204},[183,462,463],{"class":208}," true",[183,465,213],{"class":212},[183,467,469,472],{"class":185,"line":468},21,[183,470,471],{"class":212},"  }",[183,473,331],{"class":200},[183,475,477,479,481,483,485,487,489,491,493,495],{"class":185,"line":476},22,[183,478,232],{"class":212},[183,480,236],{"class":235},[183,482,264],{"class":200},[183,484,252],{"class":245},[183,486,140],{"class":249},[183,488,252],{"class":245},[183,490,385],{"class":212},[183,492,442],{"class":196},[183,494,270],{"class":212},[183,496,273],{"class":212},[183,498,500],{"class":185,"line":499},23,[183,501,502],{"class":189},"    \u002F\u002F 合成结束，恢复查询\n",[183,504,506,508,510,512],{"class":185,"line":505},24,[183,507,458],{"class":200},[183,509,319],{"class":204},[183,511,209],{"class":208},[183,513,213],{"class":212},[183,515,517,519,521],{"class":185,"line":516},25,[183,518,471],{"class":212},[183,520,391],{"class":200},[183,522,213],{"class":212},[83,524],{},[36,526,527],{"id":527},"效果预览",[529,530,531],"blockquote",{},[24,532,533,534,537],{},"以下现象在 ",[28,535,536],{},"Windows"," 下更容易复现。",[539,540,541],"h3",{"id":541},"其他输入法",[24,543,544],{},[545,546],"img",{"alt":547,"src":548},"使用其他的输入法","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002F0921873d-487a-4588-bbdb-f0012f3bf858.png",[539,550,552],{"id":551},"windows-自带输入法","Windows 自带输入法",[24,554,555],{},[545,556],{"alt":557,"src":558},"自带的输入法","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002F7ead5d47-5d41-4187-b981-04f8c17f0c5d.png",[24,560,561],{},"通过上述处理，可在保证“实时搜索体验”的同时，避免中文输入法引发的误请求问题。",[36,563,565],{"id":564},"vue-组合式封装示例","Vue 组合式封装示例",[24,567,568,569,572],{},"在 Vue 3 项目中，可将上述逻辑封装为 ",[28,570,571],{},"useComposingSearch","，避免每个搜索输入框重复实现：",[174,574,578],{"className":575,"code":576,"language":577,"meta":179,"style":179},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","import { ref } from \"vue\";\nimport { useThrottleFn } from \"@vueuse\u002Fcore\";\n\nexport function useComposingSearch(\n  onSearch: (val: string) => void,\n  delay = 500\n) {\n  const isComposing = ref(false);\n  const keyword = ref(\"\");\n\n  const throttledSearch = useThrottleFn(() => {\n    if (isComposing.value) return;\n    onSearch(keyword.value.trim());\n  }, delay);\n\n  function handleInput(e: Event) {\n    keyword.value = (e.target as HTMLInputElement).value;\n    throttledSearch();\n  }\n\n  function handleCompositionStart() {\n    isComposing.value = true;\n  }\n\n  function handleCompositionEnd() {\n    isComposing.value = false;\n    throttledSearch();\n  }\n\n  return { keyword, handleInput, handleCompositionStart, handleCompositionEnd };\n}\n","ts",[28,579,580,606,628,632,644,673,683,689,710,730,734,754,775,799,811,815,838,872,881,886,890,901,915,919,923,934,949,958,963,968,993],{"__ignoreMap":179},[183,581,582,585,588,591,594,597,600,602,604],{"class":185,"line":186},[183,583,584],{"class":285},"import",[183,586,587],{"class":212}," {",[183,589,590],{"class":200}," ref",[183,592,593],{"class":212}," }",[183,595,596],{"class":285}," from",[183,598,599],{"class":245}," \"",[183,601,13],{"class":249},[183,603,252],{"class":245},[183,605,213],{"class":212},[183,607,608,610,612,615,617,619,621,624,626],{"class":185,"line":193},[183,609,584],{"class":285},[183,611,587],{"class":212},[183,613,614],{"class":200}," useThrottleFn",[183,616,593],{"class":212},[183,618,596],{"class":285},[183,620,599],{"class":245},[183,622,623],{"class":249},"@vueuse\u002Fcore",[183,625,252],{"class":245},[183,627,213],{"class":212},[183,629,630],{"class":185,"line":216},[183,631,220],{"emptyLinePlaceholder":219},[183,633,634,637,639,642],{"class":185,"line":223},[183,635,636],{"class":285},"export",[183,638,442],{"class":196},[183,640,641],{"class":235}," useComposingSearch",[183,643,239],{"class":212},[183,645,646,649,652,654,657,659,663,665,668,671],{"class":185,"line":229},[183,647,648],{"class":235},"  onSearch",[183,650,651],{"class":204},":",[183,653,290],{"class":212},[183,655,340],{"class":656},"s99_P",[183,658,651],{"class":204},[183,660,662],{"class":661},"sZMiF"," string",[183,664,391],{"class":212},[183,666,667],{"class":196}," =>",[183,669,670],{"class":661}," void",[183,672,255],{"class":212},[183,674,675,678,680],{"class":185,"line":242},[183,676,677],{"class":656},"  delay",[183,679,319],{"class":204},[183,681,682],{"class":413}," 500\n",[183,684,685,687],{"class":185,"line":258},[183,686,391],{"class":212},[183,688,273],{"class":212},[183,690,691,694,697,699,701,703,706,708],{"class":185,"line":276},[183,692,693],{"class":196},"  const",[183,695,696],{"class":315}," isComposing",[183,698,319],{"class":204},[183,700,590],{"class":235},[183,702,264],{"class":289},[183,704,705],{"class":208},"false",[183,707,391],{"class":289},[183,709,213],{"class":212},[183,711,712,714,717,719,721,723,726,728],{"class":185,"line":282},[183,713,693],{"class":196},[183,715,716],{"class":315}," keyword",[183,718,319],{"class":204},[183,720,590],{"class":235},[183,722,264],{"class":289},[183,724,725],{"class":245},"\"\"",[183,727,391],{"class":289},[183,729,213],{"class":212},[183,731,732],{"class":185,"line":304},[183,733,220],{"emptyLinePlaceholder":219},[183,735,736,738,741,743,745,747,750,752],{"class":185,"line":309},[183,737,693],{"class":196},[183,739,740],{"class":315}," throttledSearch",[183,742,319],{"class":204},[183,744,614],{"class":235},[183,746,264],{"class":289},[183,748,749],{"class":212},"()",[183,751,667],{"class":196},[183,753,273],{"class":212},[183,755,756,759,761,763,766,769,771,773],{"class":185,"line":334},[183,757,758],{"class":285},"    if",[183,760,290],{"class":289},[183,762,293],{"class":200},[183,764,765],{"class":212},".",[183,767,768],{"class":200},"value",[183,770,296],{"class":289},[183,772,299],{"class":285},[183,774,213],{"class":212},[183,776,777,780,782,785,787,789,791,794,797],{"class":185,"line":346},[183,778,779],{"class":235},"    onSearch",[183,781,264],{"class":289},[183,783,784],{"class":200},"keyword",[183,786,765],{"class":212},[183,788,768],{"class":200},[183,790,765],{"class":212},[183,792,793],{"class":235},"trim",[183,795,796],{"class":289},"())",[183,798,213],{"class":212},[183,800,801,804,807,809],{"class":185,"line":396},[183,802,803],{"class":212},"  },",[183,805,806],{"class":200}," delay",[183,808,391],{"class":289},[183,810,213],{"class":212},[183,812,813],{"class":185,"line":401},[183,814,220],{"emptyLinePlaceholder":219},[183,816,817,820,823,825,828,830,834,836],{"class":185,"line":407},[183,818,819],{"class":196},"  function",[183,821,822],{"class":235}," handleInput",[183,824,264],{"class":212},[183,826,827],{"class":656},"e",[183,829,651],{"class":204},[183,831,833],{"class":832},"sbgvK"," Event",[183,835,391],{"class":212},[183,837,273],{"class":212},[183,839,840,843,845,847,849,851,853,855,858,861,864,866,868,870],{"class":185,"line":419},[183,841,842],{"class":200},"    keyword",[183,844,765],{"class":212},[183,846,768],{"class":200},[183,848,319],{"class":204},[183,850,290],{"class":289},[183,852,827],{"class":200},[183,854,765],{"class":212},[183,856,857],{"class":200},"target",[183,859,860],{"class":285}," as",[183,862,863],{"class":832}," HTMLInputElement",[183,865,391],{"class":289},[183,867,765],{"class":212},[183,869,768],{"class":200},[183,871,213],{"class":212},[183,873,874,877,879],{"class":185,"line":425},[183,875,876],{"class":235},"    throttledSearch",[183,878,749],{"class":289},[183,880,213],{"class":212},[183,882,883],{"class":185,"line":449},[183,884,885],{"class":212},"  }\n",[183,887,888],{"class":185,"line":455},[183,889,220],{"emptyLinePlaceholder":219},[183,891,892,894,897,899],{"class":185,"line":468},[183,893,819],{"class":196},[183,895,896],{"class":235}," handleCompositionStart",[183,898,749],{"class":212},[183,900,273],{"class":212},[183,902,903,905,907,909,911,913],{"class":185,"line":476},[183,904,458],{"class":200},[183,906,765],{"class":212},[183,908,768],{"class":200},[183,910,319],{"class":204},[183,912,463],{"class":208},[183,914,213],{"class":212},[183,916,917],{"class":185,"line":499},[183,918,885],{"class":212},[183,920,921],{"class":185,"line":505},[183,922,220],{"emptyLinePlaceholder":219},[183,924,925,927,930,932],{"class":185,"line":516},[183,926,819],{"class":196},[183,928,929],{"class":235}," handleCompositionEnd",[183,931,749],{"class":212},[183,933,273],{"class":212},[183,935,937,939,941,943,945,947],{"class":185,"line":936},26,[183,938,458],{"class":200},[183,940,765],{"class":212},[183,942,768],{"class":200},[183,944,319],{"class":204},[183,946,209],{"class":208},[183,948,213],{"class":212},[183,950,952,954,956],{"class":185,"line":951},27,[183,953,876],{"class":235},[183,955,749],{"class":289},[183,957,213],{"class":212},[183,959,961],{"class":185,"line":960},28,[183,962,885],{"class":212},[183,964,966],{"class":185,"line":965},29,[183,967,220],{"emptyLinePlaceholder":219},[183,969,971,974,976,978,980,982,984,986,988,990],{"class":185,"line":970},30,[183,972,973],{"class":285},"  return",[183,975,587],{"class":212},[183,977,716],{"class":200},[183,979,385],{"class":212},[183,981,822],{"class":200},[183,983,385],{"class":212},[183,985,896],{"class":200},[183,987,385],{"class":212},[183,989,929],{"class":200},[183,991,992],{"class":212}," };\n",[183,994,996],{"class":185,"line":995},31,[183,997,998],{"class":212},"}\n",[24,1000,1001],{},"模板中使用：",[174,1003,1006],{"className":1004,"code":1005,"language":13,"meta":179,"style":179},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cinput\n  :value=\"keyword\"\n  @input=\"handleInput\"\n  @compositionstart=\"handleCompositionStart\"\n  @compositionend=\"handleCompositionEnd\"\n\u002F>\n",[28,1007,1008,1017,1034,1050,1065,1080],{"__ignoreMap":179},[183,1009,1010,1013],{"class":185,"line":186},[183,1011,1012],{"class":212},"\u003C",[183,1014,1016],{"class":1015},"sQzsp","input\n",[183,1018,1019,1022,1025,1027,1029,1031],{"class":185,"line":193},[183,1020,1021],{"class":212},"  :",[183,1023,768],{"class":1024},"s9AJx",[183,1026,205],{"class":212},[183,1028,252],{"class":245},[183,1030,784],{"class":200},[183,1032,1033],{"class":245},"\"\n",[183,1035,1036,1039,1041,1043,1045,1048],{"class":185,"line":216},[183,1037,1038],{"class":212},"  @",[183,1040,14],{"class":1024},[183,1042,205],{"class":212},[183,1044,252],{"class":245},[183,1046,1047],{"class":200},"handleInput",[183,1049,1033],{"class":245},[183,1051,1052,1054,1056,1058,1060,1063],{"class":185,"line":223},[183,1053,1038],{"class":212},[183,1055,136],{"class":1024},[183,1057,205],{"class":212},[183,1059,252],{"class":245},[183,1061,1062],{"class":200},"handleCompositionStart",[183,1064,1033],{"class":245},[183,1066,1067,1069,1071,1073,1075,1078],{"class":185,"line":229},[183,1068,1038],{"class":212},[183,1070,140],{"class":1024},[183,1072,205],{"class":212},[183,1074,252],{"class":245},[183,1076,1077],{"class":200},"handleCompositionEnd",[183,1079,1033],{"class":245},[183,1081,1082],{"class":185,"line":242},[183,1083,1084],{"class":200},"\u002F>\n",[24,1086,1087,1089,1090,1093],{},[28,1088,140],{}," 触发时额外调用一次 ",[28,1091,1092],{},"throttledSearch","，确保合成结束后能立即以最终文本发起一次查询，而不必等待用户再多输入一个字符才触发节流窗口。",[36,1095,1096],{"id":1096},"回归检查清单",[43,1098,1101,1109,1115,1121,1127],{"className":1099},[1100],"contains-task-list",[46,1102,1105,1108],{"className":1103},[1104],"task-list-item",[14,1106],{"disabled":219,"type":1107},"checkbox"," 使用系统自带中文输入法（如 Windows 微软拼音）连续输入多个字词，查询请求只在合成结束后触发；",[46,1110,1112,1114],{"className":1111},[1104],[14,1113],{"disabled":219,"type":1107}," 使用第三方中文输入法（搜狗、QQ 拼音等）重复上述验证，确认表现一致；",[46,1116,1118,1120],{"className":1117},[1104],[14,1119],{"disabled":219,"type":1107}," 纯英文\u002F数字输入场景下，节流逐字触发查询的体验未受影响；",[46,1122,1124,1126],{"className":1123},[1104],[14,1125],{"disabled":219,"type":1107}," 粘贴大段文本到输入框时，不会因合成事件误判导致查询被跳过；",[46,1128,1130,1132],{"className":1129},[1104],[14,1131],{"disabled":219,"type":1107}," 快速连续删除输入内容（如全选删除）时，查询请求能正确响应为空关键词或跳过请求，视业务需求而定。",[36,1134,1135],{"id":1135},"常见疑问",[129,1137,1138,1164],{},[46,1139,1140,1152,1154,1155,1157,1158,1160,1161,1163],{},[1141,1142,1143,1144,1147,1148,1151],"strong",{},"为什么不直接用 ",[28,1145,1146],{},"debounce"," 替代 ",[28,1149,1150],{},"throttle","？",[32,1153],{},"\n二者都可以缓解高频请求问题，",[28,1156,1146],{}," 会在停止输入一段时间后才触发，",[28,1159,1150],{}," 则保证一定频率内至少执行一次；具体选择需结合产品对「输入过程中是否需要看到中间结果」的要求，本例保留 ",[28,1162,1150],{}," 是为了在长输入过程中也能看到阶段性结果。",[46,1165,1166,1173,1175],{},[1141,1167,1168,356,1170,1172],{},[28,1169,136],{},[28,1171,140],{}," 在所有浏览器行为一致吗？",[32,1174],{},"\n不同浏览器与输入法组合在触发时机上可能存在细微差异，尤其是移动端与部分老版本浏览器，建议在目标用户常用的浏览器\u002F输入法矩阵上做实测，而非只验证一种组合。",[36,1177,1178],{"id":1178},"相关链接",[43,1180,1181],{},[46,1182,1183],{},[157,1184,1186],{"href":1185},"\u002Fknowledge\u002Fteam-documents\u002F11","系统下单（重复单提示框）异常复盘",[1188,1189,1190],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":179,"searchDepth":193,"depth":193,"links":1192},[1193,1194,1195,1196,1197,1198,1202,1203,1204,1205],{"id":38,"depth":193,"text":38},{"id":61,"depth":193,"text":61},{"id":87,"depth":193,"text":87},{"id":117,"depth":193,"text":117},{"id":172,"depth":193,"text":172},{"id":527,"depth":193,"text":527,"children":1199},[1200,1201],{"id":541,"depth":216,"text":541},{"id":551,"depth":216,"text":552},{"id":564,"depth":193,"text":565},{"id":1096,"depth":193,"text":1096},{"id":1135,"depth":193,"text":1135},{"id":1178,"depth":193,"text":1178},{"title":8,"description":9},"knowledge\u002Fteam-documents\u002F18","knowledge\u002Fknowledge\u002Fteam-documents\u002F18.md","md",{"items":1211},[1212,1216,1220,1224,1228,1232],{"path":1213,"title":1214,"description":1215,"category":10,"score":334},"\u002Fknowledge\u002Fteam-documents\u002F17","支付中转页面升级实践","本次需求是支付链路升级：在兼容原有支付能力的基础上，新增不同版本的支付方案（如原生微信支付、小程序拉起支付）。",{"path":1217,"title":1218,"description":1219,"category":10,"score":282},"\u002Fknowledge\u002Fteam-documents\u002F19","GridView 宫格加载渲染优化","系统首页 GridView 宫格模块接口耗时不高，但首次进入总耗时接近 22s。复盘耗时分层定位过程、代码层面的瓶颈（约 2000 行、100 个 tab 重复节点）、优化手段与最终指标对比。",{"path":1221,"title":1222,"description":1223,"category":10,"score":282},"\u002Fknowledge\u002Fteam-documents\u002F13","新商家系统性能优化实践","商家系统新版本上线后，团队持续针对构建效率与用户体验做了一轮系统性优化。本文记录核心方案与落地结果，供后续版本复用。",{"path":1225,"title":1226,"description":1227,"category":10,"score":282},"\u002Fknowledge\u002Fteam-documents\u002F04","老系统升级与兼容改造实践","公司原有业务系统采用 Node + jQuery 架构，长期运行后暴露出典型遗留系统问题：",{"path":1229,"title":1230,"description":1231,"category":10,"score":282},"\u002Fknowledge\u002Fteam-documents\u002F03","键盘弹起导致底部被顶起问题（H5 适配）","在移动端 H5 页面中，当用户聚焦 input、textarea 等可编辑元素、软键盘弹出时，常见表现包括：",{"path":1233,"title":1234,"description":1235,"category":10,"score":282},"\u002Fknowledge\u002Fteam-documents\u002F21","vxe-table 行 Hover 联动高亮","近期需求是双表格联动高亮：",{"series":1237,"title":1238,"items":1239,"index":419,"prev":1311,"next":1312},"team-documents","team documents",[1240,1244,1248,1250,1252,1256,1260,1264,1268,1272,1276,1278,1282,1284,1288,1292,1296,1298,1299,1301,1305,1307],{"path":1241,"title":1242,"date":1243,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F01","执行价格弹窗：表头 \u002F 表体合并与可配置表格","2024-07-27",{"path":1245,"title":1246,"date":1247,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F02","防篡改水印","2024-01-09",{"path":1229,"title":1230,"date":1249,"pinned":16},"2024-09-17",{"path":1225,"title":1226,"date":1251,"pinned":16},"2024-12-12",{"path":1253,"title":1254,"date":1255,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F05","内部插件 \u002F 工具库开发实践","2021-08-19",{"path":1257,"title":1258,"date":1259,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F06","企业微信与小程序工单问题","2025-10-01",{"path":1261,"title":1262,"date":1263,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F07","企业微信群工具打开缓慢原因分析","2020-04-12",{"path":1265,"title":1266,"date":1267,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F08","属性排序需求","2024-06-16",{"path":1269,"title":1270,"date":1271,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F09","同业主重复单提醒规则","2020-06-07",{"path":1273,"title":1274,"date":1275,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F10","图片上传前的自定义水印实践","2021-06-10",{"path":1185,"title":1186,"date":1277,"pinned":16},"2023-11-21",{"path":1279,"title":1280,"date":1281,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F12","系统自动更新说明","2025-05-26",{"path":1221,"title":1222,"date":1283,"pinned":16},"2025-04-08",{"path":1285,"title":1286,"date":1287,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F14","选项卡切换与 Loading 状态封装","2019-11-03",{"path":1289,"title":1290,"date":1291,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F15","移动端返回事件触发两次问题复盘","2021-03-09",{"path":1293,"title":1294,"date":1295,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F16","在线协作表格接入实践","2023-10-27",{"path":1213,"title":1214,"date":1297,"pinned":16},"2022-10-15",{"path":7,"title":8,"date":15,"pinned":16},{"path":1217,"title":1218,"date":1300,"pinned":16},"2026-03-17",{"path":1302,"title":1303,"date":1304,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F20","H5 GPS 定位问题说明","2023-08-31",{"path":1233,"title":1234,"date":1306,"pinned":16},"2024-08-31",{"path":1308,"title":1309,"date":1310,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F22","企业微信 uni-app H5：OAuth 回退白屏与列表缓存","2023-08-17",{"path":1213,"title":1214,"date":1297,"pinned":16},{"path":1217,"title":1218,"date":1300,"pinned":16}]