js防抖和节流

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

var num = 1;
    function c() {
        div.innerHTML = num;
        num++;
    }
    var div = document.getElementById('div');
    console.log(div)
    div.addEventListener('click', c);

这个当我们每点击一次div盒子里面的数字就会加一 你点的越快变得越快 这样放在ajax请求中 就会疯狂发送 当前一个发送过去 没返回又发送了一个ajax 加重浏览器负担 而防抖就可以让ajax请求在这一段时间内之发送一次

function debounce(fn, wait) {
        var timeout = null; //定义一个定时器
        return function() {
            if (timeout !== null)
                clearTimeout(timeout); //清除这个定时器
            timeout = setTimeout(fn, wait);
        }
    }
    var num = 1;
    function c() {
        div.innerHTML = num;
        num++;
    }
    var div = document.getElementById('div');
    console.log(div)
    div.addEventListener('click',  debounce(c, 500));

这样就不会让用户一直点一直发送ajax只会在500毫秒内只发送一次ajax 不管你在这500毫秒内点了多少次 只发送一次

节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

function throttle(func, delay) {
        var timer = null;
        return function() {
            var context = this;
            var args = arguments;
            if (!timer) {
                timer = setTimeout(function() {
                    func.apply(context, args);
                    timer = null;
                }, delay);
            }
        }
    }
    var num = 1;

    function c() {
        div.innerHTML = num;
        num++;
    }
    var div = document.getElementById('div');
    console.log(div)
    div.addEventListener('click', throttle(c, 500));

当触发事件的时候，我们设置了一个定时器，在没到500ms之前这个定时器为null，而到了规定时间执行这个函数并再次把定时器清除。也就是说当第一次触发事件，到达规定时间再执行这个函数，执行之后马上清除定时器，开始新的循环，那么我们看到的效果就是，点击之后没有马上打印，而是等待500ms打印，有一个延迟的效果，并且这段时间点击事件不会执行函数。