节流
<!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" id="ipt">
<!-- 开源节流 -->
<script>
// 节流 : 省钱 ;
// 减少程序的运行次数;
// 在固定间隔事件之内只能执行一次;
var count = 0;
// 表示是否存在定时器;
var t = null;
document.getElementById("ipt").oninput = function(){
// console.log(count);
// 这时候有程序在100毫秒之内执行过,不需要再次执行了;
if( t !== null ){
return false;
}
t = setTimeout( function(){
count ++;
console.log(count);
// 程序100毫秒时间间隔已过,可以继续执行程序了。
// 我们改变t的状态就可以了。
t = null;
} , 500)
}
// 什么叫做函数节流 :
// 1. 是在高频词执行的函数之中;
// 2. 在函数执行的时候开启一个定时器,记录程序的执行状态;
// 3. 如果程序执行,判断上一个定时器是否执行完成,如果执行完成那么我们可以重新执行程序,如果没有完成,就跳出程序;
// 定义一个变量t=null,给一个if条件判断如果t!=null的时候,就return一个false,因为一开始我们给的t=null所以不会终止,然后我们 在写t=一个定时器,在定时器里面写ajax请求,
// 请求完之后再把t赋值回null
// 节流就是写一个定时器,让他在固定的时间内只发送一次请求.并且是第一次定时器的请求
</script>
</body>
</html>
<!-- 节流是变量的赋值改变,去抖是定时器的清除. -->
去抖
<!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" id="ipt">
<script>
// 函数去抖是一种心态,修行;
// 如果函数重复执行,那么就清空计时重新记录;
var count = 0;
var t = null;
document.getElementById("ipt").oninput = function(){
clearInterval(t);
t = setTimeout( function(){
console.log("执行");
} , 500)
}
// 效果就是一直输入字,知道输入的字结束以后才会执行console.log("执行");
// 比在做模糊搜索的时候,里面的input事件,我们不需要让他每输入一个字就发送一个ajax请求,
// 我们就可以使用去抖的方式去优化网页,就是让用户输入最后一个字1秒之后才发送一个ajax请求
// 实现的原理就是内部采用了清除上一个还没有执行的定时器的原理,如果你一直输入文字,并且产生的上一个定时器没能执行,
// 那么就会清除掉定时器
// 直到你最后一次输入内容就不清楚上一次的定时器
</script>
</body>
</html>