首页 > Web开发 > 详细

js实现连续输入之后发送请求

时间:2019-09-15 10:15:14      阅读:132      评论:0      收藏:0      [点我收藏+]

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

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

原文:https://www.cnblogs.com/cap-rq/p/11521042.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!