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做