学会防抖与节流以及应用场景

知识点:闭包的用处有两个，一个是内部函数可以访问外部函数的变量，另一个就是让这些变量的值始终保持在内存中，不会在被调用后清除。此处用闭包的作用在于把此变量存在内存中，便于滚动时使用，内部的函数会被return出去，window.scroll赋的值就是return出来的函数，这样就能滚动时触发

防抖(_debounce)

防抖意为防止抖动，防止一次事件重复执行多次，影响性能，防抖重在清零 clearTimeout

应用场景
1.点击事件按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
2.调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。
3.文本编辑器实时保存，当无任何更改操作一秒后进行保存。
4.scroll事件，当停止滚动后获取滚动条距离顶部的距离。
5.搜索框输入查询，只需用户最后一次输入完，再发送请求防抖。

此处的arguments是当事件发生时的回调函数里的参数，因为arguments默认为数组，所以可以直接使用apply改变this指向；若要使用apply则需要按单个传入。

//防抖
export function debounce(fn, delay) {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
}

举例1：scroll事件
停止滚动后，经过1s延迟后才执行，在此过程中如果不停的滚动，都会被清除，计时重新开始，直到停止滚动为止，会留下最后一个定时器

function showTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop, 1000)

举例2：搜索框输入查询

<input v-model.trim="question" />

watch: {
    // 监测该数据的变化
    question(newValue, oldValue) {
        this.getAnswer(); 
    },
},
methods:{
	getAnswer:debounce(function() {
    	axios.get("https://yesno.wtf/api").then((response) ={
        	this.answer = response.data.answer
    	}).catch((error) => {
        	this.answer = "错误" + error;
    	});
	},500),	
}

节流(_throttle)

节流是指控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。节流重在设置开关timer=null
应用场景
1.scroll 事件，滚动监听事件，每隔一秒计算一次位置信息。
2.浏览器播放事件，每隔一秒计算一次进度信息。
3.input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求。

节流方法1

function throttle(fn, delay) {
    let flag = true;
    return function () {
        if (flag) {
            flag = false
            setTimeout(() => {
                fn.apply(this, arguments);
                flag = true
            }, 1000)
        }
    }
}

节流方法2

function throttle(fn, delay) {
    let timer;
    return function (...args) {
        if (timer) {
            return false
        }
        timer = setTimeout(() => {
            fn.apply(this, args);
            // timer=null起不到终止计时器的作用，只是给timer变量赋了值 ,计时器依然存在
            timer = null
        }, delay);
    }
}

举例1：scroll事件
相当于设置了一个开关，每隔1s获取一次滚动条的位置

function showTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop, 1000)
//window.addEventListener('scroll', throttle(showTop, 1000))

举例2：搜索框输入查询
与防抖中的举例2相同，只是运用throttle函数