js中的防抖节流函数以及使用场景

js中的防抖节流函数以及使用场景

// 防抖函数(单位时间内，只有停止输入或者停止滚动的时候才会触发)
let timer = null
export function debounce(calback, delay=200) {
    return function() {
        clearTimeout(timer)
        timer = setTimeout(() => {
            calback && calback.apply(this)
        }, delay)
    }
}


// 组件中使用
<input type="text" v-model="inputs" />

data() {
	return{
		inputs: ''
	}
},
watch: {
	inputs(val) {
      debounce(() => {
        console.log(val);
      })();
    },
}   




// 节流函数(单位时间内触发的次数，比如滚动的过程中不至于频发触发)
let timer = null
export function throttle(fn, delay = 200) {
    return () => {
        if (timer) return
        timer = setTimeout(() => {
            fn && fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

// 使用
import { throttle } from "./utils/throttle";
onMounted(() => {
    window.addEventListener("scroll", () => {
	    throttle(() => {
	      	console.log(11111);
	    }, 500)();
    });
});


/**
 *    用于提交， 频繁的提交数据
 *    使用  在提交按钮 的方法中
 *    submit() {
 *        let isOk = throttle(1000);
 *        if(!isOk) return;
 *        // xxxxx
 *    }
  */
let tamp = 0;
export function throttle(num = 2000) {
    const nowTamp = Date.now();
    if(nowTamp - tamp < num) {
        return false;
    }
    tamp = nowTamp;
    return true;
}