javascript实现函数防抖与节流

github地址：JavaScript各种手写

防抖:在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

function debounce(fn, delay) {
    var timer; 
    return function () {
        var _this = this; // 保存函数的this指向
        var args = arguments;
        //每次触发事件时都取消之前的延时调用方法
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); 
        }, delay);
    };
}

//测试用例
function test(e, content) {
    console.log(e, content);
}
var testFn = debounce(test, 1000); // 防抖函数
document.onmousemove = function (e) {
    testFn(e, 'debounce'); // 给防抖函数传参
}

节流：限制函数一段时间内只能执行一次

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;  //保存函数的this指向
        var args = arguments;
        //每次触发事件时都判断当前是否有等待执行的延时函数
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; 
        }, delay)
    }
}

function test(e, content) {
    console.log(e, content);
}
var testFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
    testFn(e, 'throttle'); // 给节流函数传参
}