input节流

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

废话不多说直接上代码

<!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>

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

posted @ 2020-04-11 22:23  cruor  阅读(779)  评论(0)  编辑  收藏  举报