有关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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
JS修改css样式style浅谈
May 06 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
js实现简单计算器
Nov 22 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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 json_encode()函数返回json数据实例代码
2014/10/10 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python生成requirements.txt的两种方法
2019/09/18 Python
如何在python中判断变量的类型
2020/07/29 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
公司新员工欢迎词
2015/09/30 职场文书