有关suggest快速删除后仍然出现下拉列表的bug问题


Posted in Javascript onDecember 02, 2016

 写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的。

虽然我们把输入框的内容都删除了,甚至做了停止后续请求的相关操作,但是由于ajax是异步的,即使你停止了后续的操作,但是最后一次请求的数据还在回来的路上。

解决办法看代码:

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);
}

我这里贴的代码只是解决思路,把获取到请求回来的数据后续的相关操作先封装到函数里,当检测到value为空的时候,把函数的操作变化一下,就不会出现suggest数据框了。

以上所述是小编给大家介绍的有关suggest快速删除后仍然出现下拉列表的bug问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
JS动画定时器知识总结
Mar 23 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 #Javascript
搭建Bootstrap离线文档的方法
Dec 02 #Javascript
巧用Javascript的逻辑运算符
Dec 02 #Javascript
Vue.js第四天学习笔记(组件)
Dec 02 #Javascript
Javascript之面向对象--接口
Dec 02 #Javascript
Javascript之面向对象--封装
Dec 02 #Javascript
JavaScript制作弹出层效果
Dec 02 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Python爬取三国演义的实现方法
2016/09/12 Python
python写日志文件操作类与应用示例
2019/07/01 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
乡镇网格化管理实施方案
2014/03/23 职场文书
旅游活动总结
2014/08/27 职场文书
镇创先争优活动总结
2014/08/28 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
Python中requests库的用法详解
2022/06/05 Python