节流:周期性的执行,比如就是 每隔10秒执行一次,每隔10秒执行一次,主要就是用当前的时间减去上一次触发的时间,判断是否大于等于要执行的间隔时间,如果是就执行,不是就不执行。(注意:最后一次按键事件可能出现小于间隔时间的情况,可以给最后一次按键事件使用setTimeOut来延迟事件的触发);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>节流</title> </head> <body> <label for="jie">节流</label><input type="text" name="jie" id="demo"> <script> // 节流:当发生滚动条滚动的时候,这种连续不断的是键触发的时候,规定在一定的周期内,才执行一次,而不是一只执行,周期性的执行 var text = document.getElementById("demo"); // text.addEventListener('keyup',function(){ // //未进行节流,只要按键就会触发事件然后一直执行 // console.log(text.value); // }); //进行节流 //要执行的事件 function ajax(element){ console.log(element.value); } //节流,对func方法进行节流,执行的周期事件是delay function throttle(func,delay){ let timer; let last;//上一次执行事件的时间 return function (args){ let now = new Date();//当前时间 if(!last){ func(args) last = now; }else{ if(now-last>=delay){ //当上一次的执行事件和现在时间差大于延迟时间就立即执行 func(args); last = now; }else{ //主要是为了处理在小于延迟事件内的触发事件 clearTimeout(timer); //最后一次按键事件 //当最后一次 可能会出现 当前时间减上一次时间小于delay,也就是说 可能到了最后的时候,不会执行函数,也就无法获取到完整的数据, //所以,对最后一次触发事件进行延迟,延迟一个周期就可以了 timer = setTimeout(function(){ func(args); // last = now; },delay); } } } } var demo = throttle(ajax,1000); //监听事件 text.addEventListener('keyup',function(){ //执行事件 demo(text); }) </script> </body> </html>
抖动:键入之后在指定的延迟时间之后执行触发事件,当下一次再次键入的时候,如果是在上一次键入的延迟时间内,就将时间重新设置,重新从当前键入的时间来设置延迟事件,
如此的话,触发事件只能是在最后一次键入的时候,或则是两次键入的事件之差大于延迟时间,才会执行触发事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>防抖动</title> </head> <body> <input type="text" name="" id="text"> <script> function ajax(element){ console.log(element.value); } function debounce(func,delay){ let timer; return function (args){ let now = new Date(); clearTimeout(timer); timer = setTimeout(function(){ func(args); },delay) } } const text = document.getElementById("text"); var demo = debounce(ajax,1000); text.addEventListener('keyup',function(){ //节流就是,当上一次触发了之后,延迟指定的时间执行相关操作,但是如果在这延迟时间内又触发了事件,则需要将时间归0,从新开始延迟 //由于一直在重重新开始计时,也就是最后一次键入的时候才能真正的有效,或则说是超过延迟时间再键入的情况下才能执行 demo(text); },false); </script> </body> </html>