input节流

Posted zqm0924

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

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

以上是关于input节流的主要内容，如果未能解决你的问题，请参考以下文章

mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)

vue自定义指令，包装函数节流。

vue中element中的input框和laod中防抖和节流结合使用（性能优化）使用lodash相关方法

php代码片段: sendFile/videoStream/sendEmail/phpexcel/ffmpeg/zip

A 8b Time-Interleaved Time-Domain ADC with Input-Independent Background Timing Skew Calibration(代码片段

JS手写面试题 --- 防抖节流