有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問題
寫suggest的時(shí)候，有時(shí)我們快速刪除輸入框的文字后，但是suggest下拉列表還有出現(xiàn)，導(dǎo)致的原因是因?yàn)閍jax異步請(qǐng)求造成的。
雖然我們把輸入框的內(nèi)容都刪除了，甚至做了停止后續(xù)請(qǐng)求的相關(guān)操作，但是由于ajax是異步的，即使你停止了后續(xù)的操作，但是最后一次請(qǐng)求的數(shù)據(jù)還在回來的路上。
解決辦法看代碼：
var inp = document.getElementById('inp'),
timer = 0;
inp.oninput = function (e) {
var val = e.target.value;
var f = function () {
alert(val)
}
if (val === '') {
f = function () {
console.log('setState = []');
}
}
clearTimeout(timer);
timer = setTimeout(function () {
f();
}, 400);
}
我這里貼的代碼只是解決思路，把獲取到請(qǐng)求回來的數(shù)據(jù)后續(xù)的相關(guān)操作先封裝到函數(shù)里，當(dāng)檢測(cè)到value為空的時(shí)候，把函數(shù)的操作變化一下，就不會(huì)出現(xiàn)suggest數(shù)據(jù)框了。
以上所述是小編給大家介紹的有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- JSuggest自動(dòng)匹配下拉框使用方法(示例代碼)
- inputSuggest文本框輸入時(shí)提示、自動(dòng)完成效果(郵箱輸入自動(dòng)補(bǔ)全插件)
- javascript suggest效果 自動(dòng)完成實(shí)現(xiàn)代碼分享
- suggestion開發(fā)小結(jié)以及對(duì)鍵盤事件的總結(jié)（針對(duì)中文輸入法狀態(tài)）
- ajax Suggest類似google的搜索提示效果
- 仿google搜索提示 SuggestFramework的使用
- AJAX實(shí)現(xiàn)仿Google Suggest效果
- Google Suggest ;-) 基于js的動(dòng)態(tài)下拉菜單
相關(guān)文章
js console.log打印對(duì)像與數(shù)組用法詳解
這篇文章主要介紹了js console.log打印對(duì)像與數(shù)組用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了js使用console.log實(shí)現(xiàn)打印對(duì)象與數(shù)組的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-01-01
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫和維護(hù)，對(duì)require.js用法感興趣的朋友可以參考下本篇文章2015-10-10
JavaScript中的子窗口與父窗口的互相調(diào)用問題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問題，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-02-02
JavaScript實(shí)現(xiàn)的開關(guān)燈泡點(diǎn)擊切換特效示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的開關(guān)燈泡點(diǎn)擊切換特效,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了JavaScript禁止頁面回退的方法步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟，很好的搭檔，下面小編給大家全面解析JavaScript中apply和call以及bind的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說明
昨天去 大牛 司徒正美 的blog 看博文 突然看到 關(guān)于 onmouseenter 和onmouseleave 兩個(gè)ie專有事件..2010-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)嵌套數(shù)組重排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
最近在學(xué)習(xí)bootstrap3.3.5，遇到一個(gè)問題搞不清楚<li role="presentation">到底什么含義？今天小編通過本文給大家詳細(xì)介紹下，一起看看吧2016-12-12
uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11