// 节流 在一定时间内，只会执行一次 const btn = document.querySelector('.btn'); const str = document.querySelector('p'); let num = 0; // 使用lodash 方法 btn.addEventListener('click', throttle(fn, 5000)) function throttle(fn, T) { let dowTime = null; return function () { if (!dowTime) { dowTime = setTimeout(function () { fn(); dowTime = null; // 清楚定时器 }, T) } } } function fn() { num++; str.innerHTML = `执行的是第${num}次`; }

这是一个 JavaScript 实现节流的例子。在这个例子中，使用了 Lodash 库提供的 throttle 方法来实现节流功能。当用户点击按钮时，事件处理函数会被触发，但是函数内部的执行逻辑会被节流，即在一定时间间隔内只会执行一次。这个时间间隔由第二个参数 T 来控制，单位是毫秒。在这个例子中，时间间隔被设置为 5000 毫秒，也就是 5 秒钟。每次执行事件处理函数 fn() 时，都会将 num 变量加一，并将其值显示在页面上。通过使用节流功能，可以避免在短时间内多次执行事件处理函数，从而减轻浏览器的负担，提升用户体验。