有关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 相关文章推荐
AngularJS 简单应用实例
Jul 28 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
js下载文件并修改文件名
May 08 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
简单的网页广告特效实例
Aug 19 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
详解python单元测试框架unittest
2018/07/02 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
python 如何停止一个死循环的线程
2020/11/24 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
社会保险接收函
2014/01/12 职场文书
违反学校规定检讨书
2014/01/18 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
《锄禾》教学反思
2014/04/08 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
党员教师一句话承诺
2014/05/30 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
世界文化遗产导游词
2019/08/07 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL