好家伙，我特么直接好家伙，技术讨论区都被干掉了。那我就只能来茶馆了。

最近都在工作ing，业务代码写不完。

测试防抖节流的时候用在了scroll事件上，发现了一些问题。

1、无法正常的被销毁。

2、节流无法正常工作。

3、this指向问题，不是vue的实例。而且在scroll的事件上传参就只会执行一次很是蛋疼。

花了个把小时思考，整理了一下节流的工作，防抖同理可以这样写。

throttle:节流

在一个时间段内只会执行一次。

你跳绳一分钟只能跳一下。

debounce:防抖

在一个时间段内，只会执行最后一次。

你call女朋友电话，无论call多少次，她都只会接你最后一次call。

要是还不理解我也没办法了。

下面是代码。

<template>
	<div class="index"></div>
</template>
<script>
/*
    为了方便观看，这俩函数直接丢到script标签里好了。
*/
function throttle(fn, delay = 100) {
    var timer = null;
    return function () {
        if (timer) return;
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}
function debounce(fn, delay = 100) {
    var timer = null;
    return function () {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}
let a = 0;
export default {
    data() {
        return {
            value:123,
            scrollFunc:null,//在data中保存一个实例
        };
    },
    mounted() {
        this.scrollFunc = ()=>{
            this.better_scroll(this)//这里给真正要用到的函数附上this来使用vue的实例
        }
        window.addEventListener('scroll',this.scrollFunc)
    },
    updated() {
        window.removeEventListener('scroll',this.scrollFunc)
    },
    beforeDestroy() {
        window.removeEventListener('scroll',this.scrollFunc)
    },
    methods: {
        /*
            触发了滚动事件 1 124
            触发了滚动事件 2 125 -->这里跳到另一个路由，updated销毁了当前组件的滚动事件。
            触发了滚动事件 3 124 -->跳回来之后发现，当前组件的value值重置了，而在script标签中定义的a还是之前的。
            触发了滚动事件 4 125
            
            由此可见，函数可以正常工作。
        */
        better_scroll:throttle((that) => {
            a++;
            that.value++;
            console.log('触发了滚动事件',a,that.value)
        }, 1000)，
        /*
        better_scroll:debounce((that) => {
 			a++;
 			that.value++;
 			console.log('触发了滚动事件',a,that.value)
 		}, 1000)
 		*/
    }
};
</script>

<style scoped="scoped">
.index {
    height: 300vh;
    width: 100vw;
}
</style>

既然各位这么想要H情节，那我就用H情节来解释一下吧。

throttle:节流

你在撸铁，一秒钟上下一次。

但是不能一秒钟一次以上。

限制了你撸铁的速度，跟听音声被小姐姐蛇精管理一样。

debounce:防抖

你还是在撸铁，但是无论你撸多少次都只会在你最后一次放手的时候蛇精。

只要你还在撸就不会蛇精。就像磕了威哥一样。

我这样说你们懂了吗？

如果这样还不懂那我就要把你们的包皮扯到你们脖子上勒死你们这群老色批。