节流和防抖

• 你是不是遇到过提交按钮，点击多次发生多次提交的困惑？
• 是不是遇到过下拉搜索框每按一次键盘就请求一次接口，scroll、resize事件频繁执行的困惑？

使用 节流和防抖 就可以解决此类问题

节流

原理：初次触发时，立即执行事件，n秒后才能再次执行，n秒之内触发无效
应用：主要解决 按钮重复点击 问题
代码实现

function throttle(func,time) {
            let ifCanClick = true;
            return function () {
                if (ifCanClick) {
                    func.apply(this, arguments); // 执行 并透传this和参数
                    ifCanClick = false;
                    let setTime = setTimeout(function () {
                        ifCanClick = true;
                        clearTimeout(setTime);
                    }, time);
                }
            };    
  }
// 按钮 绑定 节流
let twoDiv = document.getElementsByClassName('stop-dou')[0];
twoDiv.onclick = throttle( function (e) {
      console.log('有效点击,去执行');
      // 逻辑代码
 }, 3000);

防抖

原理：初次触发事件，n秒后延迟执行，没触发一次就重新计时
应用：下拉搜索input框，scroll，resize，防止页面卡顿
代码实现

function debounce (func, time) {
            let setTime = null
            return function () {
                console.log(5555)
                let _this = this;
                let _arguments = arguments;
                clearTimeout(setTime);
                setTime = setTimeout(function () {
                    func.apply(_this, _arguments);
                }, time);
            }
}
// 绑定 防抖 事件
let myInput = document.querySelector('.input-text');
            myInput.onkeydown = debounce(function(e) {
                console.log('开始执行一次')
                let text = e.target.value;
                let showTag = document.querySelector('#showTag');
                showTag.textContent = text;
 }, 500)

使用 lodash.js 插件库实现节流和防抖

import _ from lodash.js
_.throttle(function() { // 节流函数
   // 逻辑代码
}, 3000)
_.debounce(function() { // 防抖函数
   // 逻辑代码
}, 3000)

注意：函数参数不能用箭头函数