js anti-shake (debounce) and throttling (throttling)

About js anti-shake and throttling

See example:

When the mouse moves back and forth in the orange area,

you can see that the value increases uncontrollably and rapidly, indicating that the function is triggered frequently.
For this problem of rapid continuous triggering and uncontrollable high frequency triggering, we have two solutions: debounce and throttle .

Anti-shake (debounce)

The so-called anti-shake means that after an event is triggered, the function can only be executed once within n seconds. If an event is triggered again within n seconds, the function execution time will be recalculated.

The anti-shake function is divided into a non-immediate execution version and an immediate execution version.

//准备工作
	let num = 1;//定义一个初始值
	let content = document.getElementById('content');//先获取一下

	function count() {
    
    //自增函数
		content.innerHTML = num++;
	};

Non-immediate execution version: Trigger the function multiple times in a short period of time, only the last execution will be executed, and the intermediate ones will not be executed

//非立即执行版
	function debounce(func, wait) {
    
    
		let timer;
		return function () {
    
    
			let context = this; // 注意 this 指向
			let args = arguments; // arguments中存着e

			if (timer) clearTimeout(timer);

			timer = setTimeout(() => {
    
    
				func.apply(this, args)
			}, wait)
		}
	}

//使用方法
	content.onmousemove = debounce(count, 1000);

Immediate execution version: Trigger the function multiple times in a short period of time, only the first time will be executed, and the middle one will not be executed

//立即执行版
	function debounce(func, wait) {
    
    
		let timer;
		return function () {
    
    
			let context = this;
			let args = arguments; // arguments中存着e

			if (timer) clearTimeout(timer);

			let callNow = !timer;

			timer = setTimeout(() => {
    
    
				timer = null;
			}, wait)

			if (callNow) func.apply(context, args);
		}
	}

//使用方法
	content.onmousemove = debounce(count, 1000);

throttle

The so-called throttling refers to triggering events continuously but only executing a function once in n seconds.
Summarize the difference between anti-shake and throttling in one sentence: anti-shake is to change multiple executions to the last execution, and throttling is to change multiple executions to execute throttling
functions at regular intervals. There are two main implementation methods: time poke and timer.

Timestamp version: Get the time of the last trigger and subtract the time of the current trigger. If it is greater than the specified time, it will be executed, otherwise it will not be executed

// 时间戳版
	function throttle(func, wait) {
    
    
		let previous = 0;
		return function () {
    
    
			let now = Date.now();
			let context = this;
			let args = arguments;
			if (now - previous > wait) {
    
    
				func.apply(context, args);
				previous = now;
			}
		}
	}

//使用方法
content.onmousemove = throttle(count, 1000);

Timer version: If the function is triggered continuously, it will execute the function according to the specified time

//定时器版
	function throttle(func, wait) {
    
    
		let timeout;
		return function () {
    
    
			let context = this;
			let args = arguments;
			if (!timeout) {
    
    
				timeout = setTimeout(() => {
    
    
					timeout = null;
					func.apply(context, args)
				}, wait)
			}
		}
	}

//使用方法
content.onmousemove = throttle(count, 1000);

Please correct me if there is any mistake