码迷,mamicode.com
首页 > 其他好文 > 详细

input节流

时间:2020-04-11 23:44:18      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:ext   initial   viewport   char   lse   事件   set   ice   事件处理   

由于表单内容每次验证频繁导致代码执行效率下降,节流就应运而生。

废话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 声明bool值等于false  起到开关的作用
        var bool=false;
        // 找到input元素赋值给变量input
        var input=document.querySelector("input");
        // 给input添加事件侦听及事件处理函数
        input.addEventListener("input",inputHandler);
        // input事件处理函数
        function inputHandler(e){
            // 当bool值为true时直接返回不执行下面函数内容
        if(bool) return;
        // 新建一个ids变量并设置函数执行时间为五百毫秒每次
        var ids=setTimeout(function(){
            // 清楚函数时间设置
            clearTimeout(ids);
            // bool赋值false   及上面的条件不满足不会返回执行这里的内容
            bool=false;
            // 打印input输入的值
            console.log(input.value)
        },500)
        // 布尔值为true   进入条件不执行函数内容跳出
        bool=true;
        }
    </script>
</body>
</html>

  结语:类似表单验证的方式都要运用节流的的方法提高运行效率。

input节流

标签:ext   initial   viewport   char   lse   事件   set   ice   事件处理   

原文地址:https://www.cnblogs.com/zqm0924/p/12682697.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!