Vue中对滚动事件使用防抖和节流

一剑长歌

已于 2023-06-12 13:52:30 修改

阅读量1.9k

点赞数

分类专栏： Vue JavaScript 文章标签： vue.js javascript 前端

于 2022-01-15 20:35:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41395548/article/details/122515342

版权

Vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

本文介绍如何在Vue项目中使用防抖(debounce)和节流(throttle)技术来优化用户体验，尤其是在处理高频触发事件如滚动监听时。通过自定义函数实现这两种方法，并在实际组件中应用以减少不必要的函数调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue中使用防抖和节流优化

1. utils.js

/* 防抖 */
function debounce(func, delay) {
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      func(...arguments);
    }, delay);
  };
}

/* 节流 */
function throttle(func, delay) {
  let time = null;
  return function () {
    let args = Array.from(arguments);
    if (time === null) {
      time = setTimeout(() => {
        func(...args);
        clearTimeout(time);
        time = null;
      }, delay);
    }
  };
}

2. demo.vue内引用

<template>
  <div>
	  <div class="container" @scroll="onScroll">
	  </div>
  </div>
</template>

<script>
import { debounce,throttle } from '../../utils';
export default {
    name: '',
    data() {
        return {
        }
    },
    created() {
    	// 防抖
    	this.onScroll = debounce(this.funScroll,1000);
    	// 节流
        this.onScroll = throttle(this.funScroll,1000);
        
    },
    methods: {
	    funScroll(){
		    console.log('滚动事件')
		}
    }
</script>

<style lang = "less" scoped>
</style>