Fix suggest list display error when input change too fast

SingleMoonlight · Nov 2, 2024 · 73a92c8 · 73a92c8
1 parent e0f3478
commit 73a92c8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qinghe-guide-v3",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/src/api/search.js b/src/api/search.js
@@ -1,20 +1,25 @@
 import { jsonpRequest } from './jsonp.js'
 
-let suggestResult = []
+let suggest = {
+    query: '',
+    result: []
+}
 
 export function getSearchSuggest(keyword) {
     return new Promise((resolve, reject) => {
         let getSearchSuggestUrl = 'https://www.baidu.com/sugrec?prod=pc&wd=' + keyword;
         let callbackName = 'jsonpCallback_getSearchSuggest';
         jsonpRequest(getSearchSuggestUrl, callbackName)
             .then(data => {
-                suggestResult.splice(0, suggestResult.length);
+                suggest.query = '';
+                suggest.result.splice(0, suggest.result.length);
                 if (data.g !== undefined) {
+                    suggest.query = data.q;
                     data.g.forEach(element => {
-                        suggestResult.push(element.q)
+                        suggest.result.push(element.q)
                     });
                 }
-                resolve(suggestResult)
+                resolve(suggest)
             })
             .catch(error => {
                 reject(error);

diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
@@ -17,6 +17,7 @@ const settingStore = useSettingStore()
 const searchHistoryStore = useSearchHistoryStore()
 const flagStore = useFlagStore()
 const suggest = ref([])
+let searchValue = ''
 
 function closeSearch(e) {
     if (e.currentTarget !== e.target) {
@@ -30,9 +31,16 @@ function handleSearchBarInputUpdate(value) {
     // 注释掉可以解决拼音输入时无法选择建议的问题
     // suggest.value.splice(0, suggest.value.length);
 
+    searchValue = value;
     getSearchSuggest(value).then(res => {
-        suggest.value = [...res];
-        printLog(LOG_INFO, res);
+        // 等到输入与请求结果一致时再更新建议列表
+        if (searchValue === res.query) {
+            suggest.value = [...res.result];
+            printLog(LOG_INFO, res);
+        } else {
+            printLog(LOG_INFO, 'Suggest request result is not match with input value.');
+            return;
+        }
     }).catch(err => {
         printLog(LOG_ERROR, err);
     })

diff --git a/src/utils/constant.js b/src/utils/constant.js
@@ -89,6 +89,14 @@ export const helpLink = 'https://www.yuque.com/smilingly/share/qinghe-guide'
 // 顺序：fix opt add del
 // 同步修改package.json的version
 export const updateHistory = [
+    {
+        time: '2024-11-3',
+        version: 'V3.0.7',
+        item: [
+            { type: 'fix', des: '修复输入或者删除搜索输入框过快时，搜索建议列表显示异常的问题' },
+            { type: 'opt', des: '添加通过按键从导航页返回主页和搜索页面的方式，Esc按键回到主页，空格按键回到搜索页面' },
+        ]
+    },
     {
         time: '2024-10-19',
         version: 'V3.0.6',