zoukankan      html  css  js  c++  java
  • 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>
    

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

  • 相关阅读:
    一直追求技术好吗?
    设计模式前言
    vba 行 列 单元格 统计
    JavaScript 仿LightBox内容显示效果
    Excel 比大小
    多态
    JavaScript 图片切换展示效果
    vba 单元格 一系例操作
    关于Flex的争论(富客户端、弱客户端)
    input文本框样式代码实例
  • 原文地址:https://www.cnblogs.com/zqm0924/p/12682697.html
Copyright © 2011-2022 走看看