debounce and throtlle

debounce

      // 核心：单位时间内触发>1 则只执行最后一次。//excutioner 可以认为是执行器。执行器存在则清空，再赋值新的执行器。function debounce(fn, delay = 500) {let excutioner = null;return function () {let context = this;let args = arguments;if (excutioner) {clearTimeout(excutioner);}excutioner = setTimeout(() => {fn.apply(context, args);}, delay);console.log("excutioner", excutioner);};}const clickFun = params => {console.log("this is click Fun", params);};const butt = document.getElementById("clickBut");//传参的2种方式butt.addEventListener("click",debounce(() => clickFun(100), 1000));// butt.addEventListener("click", debounce(clickFun, 1000).bind(this, 100));

throtlle

// 单位时间内触发>1次 只执行第一次function throttle(fn, delay = 1000) {let excutioner = null;return function () {const context = this;const args = arguments;if (!excutioner) {excutioner = setTimeout(() => {fn.apply(context, args);excutioner = null;}, deplay);}};}const butt2 = document.getElementById("clickBut2");//传参butt.addEventListener("click",throttle(() => clickFun(100), 1000));

注： //在 JavaScript 中，arguments 是一个类数组对象，它表示传递给一个函数的参数集合。通过使用 arguments
对象，你可以在函数内部访问到传递给该函数的所有参数，即使你在函数声明中没有明确指定这些参数。