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

但是在实际开发中，为了减少服务器压力，会在输入之后停留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 ...