js防抖与节流的区别及实现

* 概念： * 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

* 防抖 节流

 * 概念：

 * 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

 * 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

 * 作用：

 * 优化性能，减少内存消耗。对于高频触发事件做防抖和节流处理时非常重要的

 window.addEventListener('scroll', handle())

 function handle() {

    // 复杂计算
    // ....
    console.log('运行结果')

 }

等于只要不断滚动  handle()方法就不断执行 及其消耗性能

添加防抖处理：

function handle() {
    let timer = null
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            // 复杂计算
            // ....
            console.log('运行结果')
        }, 3000)
    }
}

添加节流处理：

function handle(){
    let isCanDo = true
    return function () {
        if (!isCanDo) return
        isCanDo = false
        timer = setTimeout(() => {
            // 复杂计算
            // ....
            console.log('运行结果')
			isCanDo3 = true
        }, 3000)
    }
}

封装公共方法   回调方式，简洁实用

let isCanDo = true;
let handle = (fun) => {
	if (!isCanDo) return
	isCanDo = false
	// 复杂计算
	// ....
	console.log('复杂计算')
	fun(() => { //相应成功回调复原
		isCanDo = true
	});
}

完整的代码

	// 防抖
	/**
	 * @desc 函数防抖 n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
	 * @param func 目标函数
	 * @param wait 延迟执行毫秒数
	 * @param immediate true - 立即执行， false - 延迟执行
	 */
	 const debounce = function(func, wait = 1000, immediate = true) {
		let timer;
		console.log(1);
		return function() {
			console.log(123);
			let context = this,
				args = arguments;
			if (timer) clearTimeout(timer);
			if (immediate) {
				let callNow = !timer;
				timer = setTimeout(() => {
					timer = null;
				}, wait);
				if (callNow) func.apply(context, args);
			} else {
				timer = setTimeout(() => {
					func.apply(context, args);
				}, wait)
			}
		}
	}
	
	/**
	 * @desc 函数节流 n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
	 * @param func 函数
	 * @param wait 延迟执行毫秒数
	 * @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
	 */
	const throttle = (func, wait = 1000, type = 1) => {
		let previous = 0;
		let timeout;
		return function() {
			let context = this;
			let args = arguments;
			if (type === 1) {
				let now = Date.now();
	
				if (now - previous > wait) {
					func.apply(context, args);
					previous = now;
				}
			} else if (type === 2) {
				if (!timeout) {
					timeout = setTimeout(() => {
						timeout = null;
						func.apply(context, args)
					}, wait)
				}
			}
		}
	}

// 使用方法：
<view @click="btnBottom('按钮')">按钮</view>

methods: {

	btnBottom: throttle(
		function(e) {
			console.log("ceshi111",e);
		}
　　　　)

总结：

防抖：如果规定时间内被多次触发，则前面的执行会被取消，只会保留最后一次执行

节流：如果规定时间内被多次触发，只能待前一次执行完了，才能被继续触发，否则不会执行。