标签: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>
结语:类似表单验证的方式都要运用节流的的方法提高运行效率。
标签:ext initial viewport char lse 事件 set ice 事件处理
原文地址:https://www.cnblogs.com/zqm0924/p/12682697.html