标签：doc val window cti res 请求 NPU key 不执行
事件被触发时，在n秒后执行函数，在n秒内多次触发事件，则重新开始计时
利用定时器来实现，在n秒内多次触发，则先清除定时器，从新计时
1 // 定义一个请求函数 2 function request(val) { 3 console.log("request: " + val); 4 } 5 6 // 定义一个防抖函数 7 function debounce(fn, delay) { 8 let timeout; 9 return function(){ 10 clearTimeout(timeout) 11 timeout = setTimeout(()=>{ 12 fn.apply(this, arguments) 13 },delay) 14 } 15 } 16 17 let inputEl = document.getElementById("input"); 18 19 let debounceInput = debounce(request, 500) 20 21 inputEl.addEventListener("keyup", function (e) { 22 debounceInput(e.target.value); 23 });
在规定的单位时间段内，函数只能执行一次，在单位时间内多少触发，则只有一次有效
当一个定时器执行，就会生成一个定时器id，当这个id存在就说明在单位时间内函数只执行了一次。
// 定义一个请求函数 function request(val) { console.log("request: " + val); } // 定义一个节流函数 function throttle(fn, delay) { let timer; return function(){ if(!timer) { fn.apply(this, arguments) timer = setTimeout(()=>{ clearTimeout(timer) timer = null },delay) } } } let inputEl = document.getElementById("input"); let throttleInput = throttle(request, 500) inputEl.addEventListener("keyup", function (e) { throttleInput(e.target.value); });
实现方法2 /** * 节流，每隔N秒只执行一次函数 * @param {*} fun 调用的函数 * @param {*} wait 间隔时间 */ function throttle(fun, wait) { let timeout, context; return function (...args) { context = this; if (!timeout) { timeout = setTimeout(() => { fun.apply(context, args); timeout = null; }, wait); } }; }
标签：doc val window cti res 请求 NPU key 不执行
原文地址：https://www.cnblogs.com/ndh074512/p/14820491.html
