标签: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