JS 抖动和节流
Posted panjingshuang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 抖动和节流相关的知识，希望对你有一定的参考价值。
节流:周期性的执行，比如就是 每隔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>
来源：https://juejin.im/post/5b8de829f265da43623c4261#comment
以上是关于JS 抖动和节流的主要内容，如果未能解决你的问题，请参考以下文章