What is the difference between anti-shake and throttling? What are the application scenarios? What is the principle? How to achieve native?

Some events of the browser, such as: resize, scroll, keydown, keyup, keypress, mousemove, etc. These events are triggered too frequently, and the callback functions bound to these events will be called continuously. The purpose of such a browser is to ensure the consistency of information, which is a waste of resources for us.
Therefore, the anti-shake and throttling should be strictly calculated as the knowledge of performance optimization.

Concept: Anti-shake means that the code logic will not be executed within a fixed period of time. If the event is triggered, it will be executed after n seconds, and if the trigger is repeated, it will be delayed for n seconds until the triggered event ends, and then the code
section will be executed after n seconds . Flow is when you trigger an event, the code logic has a fixed time to trigger

Difference: When the code logic is executed, there will be delays in anti-shake, but there will be no delays in throttling. It is a good baby who understands the concept of time! ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

Anti-shake: Application scenario:

Principle: For example,
but the following I wrote the mousemove event

code:

   <div class="box">

    </div>
        //  js代码：
        var index = 0;
        var box = document.querySelector('.box')

        function getAction(e) {
            console.log(this)  // 输出当前得this指向
            console.log(e)  // 输出当前得事件对象
            index++;
            box.innerHTML = index
        }
        getAction()
        //box.onmousemove = getAction  // getAction里面this指向dom e表示事件对象
        box.onmousemove = debounce(getAction, 2000)  // 对getAction防抖
        // getAction里面this指向window e undefined

        // func代表对那个高频函数进行防抖，wait代表防抖得时间间隔
        function debounce(func, wait) {
            var timeout;
            return function () {
                console.log(this)  // 指向dom div
                var _this = this   // 改变this得指向
                var args = arguments  // e就不会undefined了
                clearTimeout(timeout)
                timeout = setTimeout(function () {
                    func.apply(_this, args)   // this经过处理后this指向dom div
                }, wait)
            }
        }

Throttling
Application: pull-up loading, scroll bar
Principle:

Code:

       <div class="box">

       </div>
       // js代码
        var index = 0;
        var box = document.querySelector('.box')
        function getAction(e) {
            index++;
            box.innerHTML = index
        }
        getAction()
        box.onmousemove = throttle(getAction, 2000)

        // 俩种实现方式 ：时间戳 计时器
        function throttle(func, wait) {
            var timeout
            var _this;
            var args;


            return function () {
                _this = this;
                args = arguments
                if (!timeout) {
                    timeout = setTimeout(function () {
                        func.apply(_this, args)
                        timeout = null   // !!null = false
                    }, wait)
                }
            }
        }