- Shake
N seconds after the trigger function will be executed once a high-frequency event, if n seconds high frequency event is triggered again, time is recalculated
- Implementation: to set the delay calling a method to delay calling methods, and canceled prior to the trigger event every time
- Cons: If the event is constantly triggered within a specified time interval, the calling method will be constantly delayed
//防抖debounce代码：
function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数 timeout = setTimeout(() => { fn.apply(this, arguments); }, 500); }; } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle)); - Throttling
Event triggering frequency, but only once within n seconds, the execution frequency diluted throttling function
- Implementation: every trigger event, if there is a delay function currently awaiting execution, the direct return
//节流throttle代码：
function throttle(fn) { let canRun = true; // 通过闭包保存一个标记 return function () { // 在函数开头判断标记是否为true，不为true则return if (!canRun) return; // 立即设置为false canRun = false; // 将外部传入的函数的执行放在setTimeout中 setTimeout(() => { // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。 // 当定时器没有执行的时候标记永远是false，在开头被return掉 fn.apply(this, arguments); canRun = true; }, 500); }; } function sayHi(e) { console.log(e.target.innerWidth, e.target.innerHeight); } window.addEventListener('resize', throttle(sayHi)); Summary:
Function Image Stabilization: The multiple operations combined into a single operation. The principle is to maintain a timer function is triggered after a specified delay time, but the trigger again within the delay time, the timer will reset before the cancellation. As a result, only the last operation can be triggered.
Throttle function: making only trigger once within a certain time function. The principle is not performed by determining whether there is a delay calling a function.
Differences: function throttle trigger no matter how often the event will ensure that you will perform a real event handler within the specified time, and anti-shake function only triggers a function only after the last event. For example, in a scene loaded infinite pages, we scroll the page when users need, from time to time send an Ajax request, rather than stopping when the user scrolls the page to request operational data. Such a scenario, it is suitable for expansion techniques.
throttle (throttling): within a certain time (within 30 cases), no matter how many times a method was mobilized, the second method will mobilize again in the 30s.
debounce (anti-shake): within a certain time (in the example 5s), no matter how many times a method to mobilize, the method is executed only once.