有关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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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获取当前执行php文件名的代码
2017/03/02 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
php5与php7的区别点总结
2019/10/11 PHP
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
基python实现多线程网页爬虫
2015/09/06 Python
python django事务transaction源码分析详解
2017/03/17 Python
python编写分类决策树的代码
2017/12/21 Python
实践Vim配置python开发环境
2018/07/02 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python基于WordCloud制作词云图
2019/11/29 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
如何处理简单的PHP错误
2015/10/14 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
医学专业毕业生个人的求职信
2013/12/04 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2014年党支部工作总结
2014/11/13 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技