84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
If you were building a search tool and wanted search results to pop up as you typed, write a function that gets called on every key down but calls the server when the user stops typing for 400ms.
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
//使用jquery编写... var delay = null; $('#searchInput').on('keyup', function () { if(delay) { clearTimeout(delay); } //判断文字内容长度是否达到最低要求 var searchKey = $(this).val(); if (searchKey.length < 2) { return; } //延迟查询api delay = setTimeout(function () { $.get('/api/search', {searchKey: searchKey}).then(function (data) { //填充数据.... doSomething(data); //显示结果列表 $('#result-list').show(); }); }, 400); });
监听事件 -> 读前端cache ? 构建结果列表 : (发请求拿结果 -> cache并构建结果列表) 400ms 可以用计时器做 delay 处理,根据事件触发情况看是进后面流程还是 clear 掉。
哈,我也搞過這種東西,處理辦法也是同樣的。
之所以這樣,是因爲你會發現在用戶高速鍵入的時候發出的請求很多,卻只有最後一個纔有意義。況且實時感也只是在你停頓的時候才能顯現出來。
所以這一 debounce 可以很有效地改善體驗。
具體實現,除了 debounce 就是 ajax,隨便找個庫比如 underscore 都會提供。
原理如樓上代碼,就是對每次事件先 clearTimeout 再 setTimeout。
http://www.glassdoor.com/Interview/If-you-were-building-a-search-tool-and-wanted-search-results-to-pop-up-as-you-typed-but-the-server-call-was-taxing-write-a-QTN_835901.htm
用Ajax做
监听事件 -> 读前端cache ? 构建结果列表 : (发请求拿结果 -> cache并构建结果列表)
400ms 可以用计时器做 delay 处理,根据事件触发情况看是进后面流程还是 clear 掉。
哈,我也搞過這種東西,處理辦法也是同樣的。
之所以這樣,是因爲你會發現在用戶高速鍵入的時候發出的請求很多,卻只有最後一個纔有意義。況且實時感也只是在你停頓的時候才能顯現出來。
所以這一 debounce 可以很有效地改善體驗。
具體實現,除了 debounce 就是 ajax,隨便找個庫比如 underscore 都會提供。
原理如樓上代碼,就是對每次事件先 clearTimeout 再 setTimeout。
http://www.glassdoor.com/Interview/If-you-were-building-a-search-tool-and-wanted-search-results-to-pop-up-as-you-typed-but-the-server-call-was-taxing-write-a-QTN_835901.htm
用Ajax做