当前位置：网站首页>学习一下常说的节流

学习一下常说的节流

2022-08-09 04:55:00 【lazytomato】

start

节流(throttle),减少流量，短时间内触发多次，我每隔一段时间触发一次;

手写

节流
还是之前的输入框输入事件的案例，来手写一个版本。需求呢：短时间输入多次内容，我每隔 1 秒触发一次

<!DOCTYPE html>
<html lang="en">
  <body>
    <input type="text" id="in" />

    <script> var input = document.querySelector('#in') let say = function (e) {
       console.log('值改变事件', +new Date()) } input.addEventListener('keydown', throttle(say, 1000)) function throttle(fn, wait) {
       // 1. 和防抖类似，接收两个参数：函数，间隔时间 // 2. 定义一个变量存储定时器 var timer // 3. 定义一个变量存储第一次执行的时间 var start = 0 return function () {
       // 4. 获取当前时间 var now = +new Date() // 5.由于要使用定时器，所以这里存储一下 this 和 arguments var that = this var arg = arguments // 6.是否满足节流的时间限制 if (start + wait <= now) {
       // 7. 如果之前有定时器 清除 if (timer) {
       clearTimeout(timer) timer = null } // 8. 满足条件，存储一下当前时间，然后允许执行 start = now fn.apply(that, arg) } else if (!timer) {
       // 9.如果不满足节流限制，且没有定时器，添加一个定时器 timer = setTimeout(function () {
       // 10. 定时器中需要记录定时器执行的时间， start = now fn.apply(that, arg) }, wait) } } } </script>
  </body>
</html>