第 47 題：什么是防抖和節流？

防抖

觸發高頻事件后 n 秒內函數只會執行一次，如果 n 秒內高頻事件再次被觸發，則重新計算時間

<script>
export default {
    data() {
        return {
            timer: null
        };
    },
    methods: {
        click() {
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
                console.log('鼠標單擊');
            }, 200);
        }
    }
};
</script>

節流

在單位時間內, 只會觸發一次事件，如果事件觸發后，又重復觸發了同一事件，則忽略后面觸發的事件，直到第一次事件的計時結束

<script>
export default {
    data() {
        return {
            isFinshed: true
        };
    },
    methods: {
        click() {
            if (this.isFinshed === true) {
                this.isFinshed = false;

                this.timer = setTimeout(() => {
                    console.log('鼠標單擊');
                    this.isFinshed = true;
                }, 200);
            }
        }
    }
};

文章的內容/靈感都從下方內容中借鑒

• 【持續維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues

• 【大數據可視化圖表插件】https://www.npmjs.com/package/ns-echarts

• 【利用 THREE.JS 實現 3D 城市建模（珠海市）】https://3d.noxussj.top/