js基础之防抖与节流总结（vue中使用防抖）

防抖

概念解释：单位时间内事件高频触发只会生效最后一次触发。从事件第一次触发开始计时，当事件在单位时间内再次触发就会重置计时器，只有事件触发后单位时间内没有再次触发，事件才会生效。
应用场景：输入框、提交按钮等。

const debounce = (fn, delay=300) => {
	let timer = null
	return () => {
		clearTimeout(timer)
		timer = setTimeout(() => {
			fn.call(this)
		}, delay)
	}
}

在vue中使用

创建common.js文件在utils文件夹下

const debounce = function (fn, delay = 300) {
    let timer = null
    return function () {
        let that = this
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(that)
        }, delay)
    }
}
module.exports = debounce

在组件中导入common.js文件

import debounce from '@/utils/config.js'

在组件js中使用防抖函数，（提交事件）

subBtn: debounce(function () {
		    console.log(this)
		}, 300),

注：使用时注意this指向问题

节流

概念解释：单位时间内事件只能被触发一次。当事件触发后加锁，再次触发的事件都是无效的，只有单位时间过后，事件生效并解锁事件才可以被再次触发。（用来稀释高频触发的事件）
应用场景：拖拽元素改变位置，页面滚动等

const throttle = (fn, delay=300) => {
	let flag = true
	return () => {
		if (!flag){
			return false
		}
		flag = false
		setTimeout(() => {
			fn.call(this)
			flag = true
		}, delay)
	}
}

总结

防止事件高频触发