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

但是在实际开发中，为了减少服务器压力，会在输入之后停留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. #P2341 [HAOI2006]受欢迎的牛 题解

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...

  2. 自定义Toast排队重复显示问题：

    原文 http://blog.csdn.net/baiyuliang2013/article/details/38655495Toast是安卓系统中,用户误操作时或某功能执行完毕时,对用户的一种提示, ...

  3. Linux 允许root用户远程登陆

    首先确保ssh服务已经安装: ps -e | grep ssh or service ssh start 如果没有安装则: apt-get install ssh 安装完之后 查看 /etc/ssh/ ...

  4. 至少你要了解RSS

    本文概要: 1.RSS是什么,有什么作用? 2.是不是所有的网站都有RSS功能? 3.没有RSS功能的网站如何订阅? 4.RSS是否已经过时? 5.推荐一些热门的RSS订阅地址 1.RSS是什么,有什 ...

  5. c++ 关键字this的用法简介

    前言: 自己在程序的时候一般不用this,但是在后来发现越来越有必要好好整理一下该知识点了,如有不足之处以及缺漏之处还望各位读者指出. 概念&实例 this 是 C++ 中的一个关键字,也是一 ...

  6. 《React后台管理系统实战 ：三》header组件：页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数

    一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...

  7. HashMap1.8之节点删除分析

    HashMap之节点删除 大家一直关注的都是HashMap如何添加节点,当节点数量大于8的时候转化为红黑树,否则使用链表等等,但大家是否有看过删除节点的处理逻辑呢? 今天来看看HashMap删除节点的 ...

  8. 一、java基础-数据类型_数据类型转化_字符编码_转义字符

    1.Java  支持的8种基本数据类型: java的四种整数数据类型:byte 1    short 2     int4     long8   byte     8位带符号整数 -128到127之 ...

  9. threading 多线程

    # coding:utf- import time from threading import Thread def foo(x):#这里可以带参数def foo(x) print "foo ...

  10. 虚拟机字节码指令表 JVM

    虚拟机字节码指令表 标签(空格分隔): Java基础 JVM 记录虚拟机字节码指令,方便分析.以下内容来自<深入理解Java虚拟机> 字节码 助记符 指令含义 0x00 nop 什么都不做 ...