输入框是我们经常会用到的功能,想要实现输入就请求的功能

但是在实际开发中,为了减少服务器压力,会在输入之后停留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实现连续输入之后发送请求的更多相关文章

  1. 【vue】vue +element 搭建项目,实现实时输入效果时停止输入后发送请求

    1.实现的效果 输入关键字后,根据输入的关键字实时显示搜索的结果,按回车键时也进行搜索 2.原理: 通过时间戳+定时器+一个全局变量实现.代码量很少比较易懂. 用户输入时触发keyup事件,并调用事件 ...

  2. keyup实现在输入状态不发送搜索请求,停止输入后发送

    个人需求:通过keyup事件配合后台elasticsearch(弹性搜索),用户在输入状态不发送请求,等停止输入后发送请求. 这是个思考笔记,因为项目临时需要弹性搜索功能,所以临时想了这么个法子,方法 ...

  3. js发送请求

    1.Chrome控制台中 net::ERR_CONNECTION_REFUSED js频繁发送请求,有可能连接被拒绝,可用setTimeout,过几秒发送,给个缓冲时间 var overlayAnal ...

  4. js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  5. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  6. js配合php原生代码发送ajax请求

    <?php //$a = "{'id':'1'}"; //$b = '{"id":1}'; //$a = iconv('ASCII',"UTF- ...

  7. jquery.ajax异步发送请求的简单测试

    使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...

  8. Node.js IO处理输入和回显,以及当今web应用程序的发展史

    1.关于Node.js IO处理输入和回显 在Windows终端或者CD中输入   echo  'I must learn about Node.js' 结果将刚刚输入的   echo  'I mus ...

  9. input输入框延时发送请求问题

    同样是面试遇到的问题,input输入框,怎么减少发送请求次数. 键盘抬起触发事件,首先清除定时器,再开启定时器.只要小于1s的连续输入,都会先把上一次定时器清除.停顿一秒后,开始执行请求事件(此处为c ...

随机推荐

  1. gradle 打包所有依赖 Invalid signature file digest for Manifest main attributes(转)

    1.打包所有依赖: // 指定main函数的类 jar { manifest { attributes "Main-Class": "com.baeldung.fatja ...

  2. 使用TortoiseGit处理代码冲突

    使用TortoiseGit处理代码冲突  https://www.cnblogs.com/jason-beijing/p/5718190.html 场景一  user0 有新提交 user1 没有pu ...

  3. HttpClient 以post的方式发送请求(由于请求参数太多所以改成以post提交表单的方式)

    1:Util类方法 /** * 发送 Post请求 * * @param url * @param reqXml * @return */ public static String post(Stri ...

  4. Intellij Idea 下包建包,无论怎么建都在同一级,已解决(附图)

    1.很多新手,刚开始使用Intellij Idea的时候,项目建包都出现所建的包都在用一级. 2.这是因为,刚开始建项目的时候,Hide Empty Middle Packages是默认勾选的,只要去 ...

  5. LaTeX 使用笔记

    实现一个归类样式,如图: 代码: \left\{ \begin{aligned} 监督学习 \left\{ \begin{aligned} 回归 \\ 分类 \end{aligned} \right. ...

  6. 聚合数据实名认证接口-java方法

    只需要填入购买的APPKEY,然后直接调用方法JuheDemo.info(user_name, anchor_card);传入姓名和身份证号,根据获取的返回参数进行拆分,如res=1说明正确. //进 ...

  7. ch8 固定宽度、流式、弹性布局

    假设浏览器窗口设置为1250px:wrapper的宽度为960px:content的宽度为920px:确保了wrapper居中时两边有20px的间距:  secondary的宽度为230px:  pr ...

  8. 网站seo优化教你如何引蜘蛛爬行网站

    1. 网站和页面的权重 这个是咱们都知道的,网站和页面的权重越高的话,蜘蛛一般会匍匐的越深,被蜘蛛录入的页面也更多一些.可是一个新的网站,权重到达1的话是相对简单的,可是假如想要把权重再网上添加则会越 ...

  9. RCTF crypto100(1)

    题面是一个文件,里面是用base64加密的字符串,如下所示: IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI ...

  10. 第1节 storm编程:3、storm的架构模型的介绍

    nimbus:主节点,接收客户端提交的任务,并且分配任务,新的版本当中nimbus已经可以有多个了 zookeeper集群:storm依靠zk来保存一些节点信息,nimbus将分配的任务信息都写入到z ...