js防抖节流

防抖（debounce）

指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

普通js

// fn 函数
// time 延迟时间
function debounce(fn,time){
        let timer = null;
        return function() {
            let _this = this;
            let args = arguments;
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(_this, args);
            }, time);
        }
    }

使用：

	function fn() {
		console.log(123);
	}
	// 函数执行
	document.getElementById('btn').onclick = debounce(fn, 1000);

vue中

	// public.js 文件
	export function debounce(fn, time){
		var timer = null;
		return function() {
			var _this = this;
			var args = arguments;
			clearTimeout(timer);
			timer = setTimeout(() => {
				fn.apply(_this,args);
			}, time);
		};
	}

使用：

methods: {
	submit:debounce(function () {
		console.log('提交');
	    this.submitFn();
	},1000),
	submitFn() {
		console.log('执行提交')
	},
}

节流（throttle）

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效；

// fn 函数
// time 延迟时间
function throttle(fn, time){
        let lastTime = null;
        let timer = null;
        return function () {
            let nowTime = Date.now();
            let args = arguments;
            if(lastTime && nowTime - lastTime < time){
                clearTimeout(timer);
                timer = setTimeout(() => {
                    lastTime = nowTime;
                    fn.apply(this,args);
                }, time)
            } else {
                lastTime = nowTime;
                fn.apply(this,args);
            }
        }
    }

使用：

	function fn() {
		console.log(123);
	}
	// 函数执行
	document.getElementById('btn').onclick = throttle(fn, 1000);

vue中

	// public.js 文件
	export function throttle(fn,time){
    var lastTime = null;
    var timer = null;
    return function () {
        var args = arguments;
        var nowTime = Date.now();
        if(lastTime && nowTime - lastTime < time){
            clearTimeout(timer);
            timer = setTimeout(() => {
                // 记录上一次函数执行的时间
                lastTime = nowTime;
                // 修正this指向
                fn.apply(this, args);
            }, time)
        } else {
            lastTime = nowTime;
            fn.apply(this, args);
        }
    }
}

使用：

methods: {
	submit:throttle(function () {
		console.log('提交');
	    this.submitFn();
	},1000),
	submitFn() {
		console.log('执行提交')
	},
}