js实现连续输入之后发送请求
输入框是我们经常会用到的功能,想要实现输入就请求的功能
但是在实际开发中,为了减少服务器压力,会在输入之后停留1s没有输入之后再进行搜索
研究之后用原生js及表单写了一个简单的demo,如果有好的demo也可以留言大家一起交流
实现效果如下:
html代码
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head> <body>
<input type="text" onkeyup="send()" class="box">
</body> </html>
js代码
<script src="./jquery-3.0.0.min.js"></script>
<script>
let count = 0, timer = '', val = ''
function send() {
// 初始化
count = 0
if (timer) {
clearInterval(timer)
}
// 获取输入值
if (val.length != $('.box').val().length) {
val = String($('.box').val())
if (!val.length) {
return
}
}
// 定时器判断空闲时发送请求
timer = setInterval(function () {
++count
if (count >= 10) {
console.log(`发送请求,参数:${val}`);
clearInterval(timer)
}
}, 100)
}
</script>
js实现连续输入之后发送请求的更多相关文章
- 【vue】vue +element 搭建项目,实现实时输入效果时停止输入后发送请求
1.实现的效果 输入关键字后,根据输入的关键字实时显示搜索的结果,按回车键时也进行搜索 2.原理: 通过时间戳+定时器+一个全局变量实现.代码量很少比较易懂. 用户输入时触发keyup事件,并调用事件 ...
- keyup实现在输入状态不发送搜索请求,停止输入后发送
个人需求:通过keyup事件配合后台elasticsearch(弹性搜索),用户在输入状态不发送请求,等停止输入后发送请求. 这是个思考笔记,因为项目临时需要弹性搜索功能,所以临时想了这么个法子,方法 ...
- js发送请求
1.Chrome控制台中 net::ERR_CONNECTION_REFUSED js频繁发送请求,有可能连接被拒绝,可用setTimeout,过几秒发送,给个缓冲时间 var overlayAnal ...
- js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)
js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- js配合php原生代码发送ajax请求
<?php //$a = "{'id':'1'}"; //$b = '{"id":1}'; //$a = iconv('ASCII',"UTF- ...
- jquery.ajax异步发送请求的简单测试
使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...
- Node.js IO处理输入和回显,以及当今web应用程序的发展史
1.关于Node.js IO处理输入和回显 在Windows终端或者CD中输入 echo 'I must learn about Node.js' 结果将刚刚输入的 echo 'I mus ...
- input输入框延时发送请求问题
同样是面试遇到的问题,input输入框,怎么减少发送请求次数. 键盘抬起触发事件,首先清除定时器,再开启定时器.只要小于1s的连续输入,都会先把上一次定时器清除.停顿一秒后,开始执行请求事件(此处为c ...
随机推荐
- gradle 打包所有依赖 Invalid signature file digest for Manifest main attributes(转)
1.打包所有依赖: // 指定main函数的类 jar { manifest { attributes "Main-Class": "com.baeldung.fatja ...
- 使用TortoiseGit处理代码冲突
使用TortoiseGit处理代码冲突 https://www.cnblogs.com/jason-beijing/p/5718190.html 场景一 user0 有新提交 user1 没有pu ...
- HttpClient 以post的方式发送请求(由于请求参数太多所以改成以post提交表单的方式)
1:Util类方法 /** * 发送 Post请求 * * @param url * @param reqXml * @return */ public static String post(Stri ...
- Intellij Idea 下包建包,无论怎么建都在同一级,已解决(附图)
1.很多新手,刚开始使用Intellij Idea的时候,项目建包都出现所建的包都在用一级. 2.这是因为,刚开始建项目的时候,Hide Empty Middle Packages是默认勾选的,只要去 ...
- LaTeX 使用笔记
实现一个归类样式,如图: 代码: \left\{ \begin{aligned} 监督学习 \left\{ \begin{aligned} 回归 \\ 分类 \end{aligned} \right. ...
- 聚合数据实名认证接口-java方法
只需要填入购买的APPKEY,然后直接调用方法JuheDemo.info(user_name, anchor_card);传入姓名和身份证号,根据获取的返回参数进行拆分,如res=1说明正确. //进 ...
- ch8 固定宽度、流式、弹性布局
假设浏览器窗口设置为1250px:wrapper的宽度为960px:content的宽度为920px:确保了wrapper居中时两边有20px的间距: secondary的宽度为230px: pr ...
- 网站seo优化教你如何引蜘蛛爬行网站
1. 网站和页面的权重 这个是咱们都知道的,网站和页面的权重越高的话,蜘蛛一般会匍匐的越深,被蜘蛛录入的页面也更多一些.可是一个新的网站,权重到达1的话是相对简单的,可是假如想要把权重再网上添加则会越 ...
- RCTF crypto100(1)
题面是一个文件,里面是用base64加密的字符串,如下所示: IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI ...
- 第1节 storm编程:3、storm的架构模型的介绍
nimbus:主节点,接收客户端提交的任务,并且分配任务,新的版本当中nimbus已经可以有多个了 zookeeper集群:storm依靠zk来保存一些节点信息,nimbus将分配的任务信息都写入到z ...