事件循环和防抖节流

事件循环机制包括两个重要的概念：宏任务和微任务。宏任务包括setTimeout、setInterval操作等，而微任务包括Promise、async/await等。在事件循环的执行过程中，微任务会优先于宏任务执行。

需要注意的是，事件循环机制是针对特定的编程语言或环境而言的，不同的语言或环境可能有不同的实现方式和细节。

防抖（debounce）的作用是在事件触发后延迟一段时间执行函数，如果在延迟期间内再次触发事件，则重新计时。防抖的目的是避免事件被误触发多次，节省资源。比如在按钮点击、搜索框输入等场景下，防抖可以避免用户频繁触发事件导致多次请求或操作。

 

防抖代码如下：

 function debounce (fn,delay=200) {
        let timer=0
        return function() {
            // 如果这个函数已经被触发了
            if(timer) {
                /*清楚定时器,函数接着往下走**/
                clearTimeout(timer)
            }
            timer=setTimeout(() => {
                fn.apply(this,arguments); // 透传 this和参数
                timer=0
            },delay)
        }
    }

节流（throttle）的作用是在一段时间内只执行一次函数。无论事件触发有多频繁，节流都会保证在规定时间内只执行一次真正的事件处理函数。节流的应用场景包括滚动加载、搜索联想、高频点击提交等。

节流代码如下：

    function throttle (fn,delay=200) {
        let timer=0
        return function() {
            if(timer) {
                /*直接返回,函数不会再运行**/
                return
            }
            timer=setTimeout(() => {
                fn.apply(this,arguments); // 透传 this和参数
                timer=0
            },delay)
        }
    }

防抖和节流的区别在于，防抖只在最后一次事件触发后才执行一次函数，而节流在规定时间内每隔一段时间执行一次函数。

防抖和节流的实现方式有多种，常见的是使用定时器和时间戳。定时器方式的防抖会在事件触发后设定一个延迟时间，如果在延迟时间内再次触发事件，则清除之前的定时器并重新设定。时间戳方式的节流会记录上次执行函数的时间戳，每次触发事件时判断当前时间与上次执行时间的间隔，如果超过规定时间则执行函数并更新时间戳。