Anti shake and throttling are easy to understand

Shake proof : adopt setTimeout The way , Within a certain time interval , Change multiple triggers into one trigger

User triggered events too frequently , Only for the last time

// 1. First get dom node 
	var ipt = document.getElementById("input")
	// 2. Define a variable to clear the timer 
	var t = null
	// 3. Triggering event 
	ipt.oninput = function () {
		// 4. Judge whether there is t
		if (t !== null) {
			// 5. If there is any, clear the timer 
			clearTimeout(t)
		}
		// 6. without t Assign the timer to t
		t = setTimeout(() => {
			console.log(this.value);
		}, 1000)
	}

That's it , Within one second interval , Multiple clicks will clear the timer , The timer will be executed after the interval exceeds one second

Encapsulate the ：

// 1. First get dom node 
	var ipt = document.getElementById("input")

	ipt.oninput = debounce(function () {
		console.log(this.value);
	}, 1000)

	//  Encapsulate an anti shake 
	function debounce(fn, time) {
		var t = null
		return function () {
			if (t !== null) {
				clearTimeout(t)
			}
			t = setTimeout(() => {
				//  Need to use call change this Point to , Otherwise this Point to window
				fn.call(this)
			}, time)
		}
	}

throttle ： Control execution times

Control the execution times of high-frequency events

  //  throttle 
        window.onscroll = throttle(function () {
            console.log("1");
        }, 500)
        function throttle(fn, time) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn()
                        //  After each timer execution flag Change it to true
                        flag = true
                    }, time);
                }
                flag = false
            }
        }