Vue实现函数防抖和节流

CodeYu_

于 2020-11-11 15:24:19 发布

阅读量618

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Aiolimp/article/details/109623123

本文介绍了如何在Vue项目中实现函数的防抖和节流功能。首先，在全局utils文件夹下创建了globalFunction.js，然后在单页面组件中导入这些函数。最后，强调在调用这些函数时应注意避免使用箭头函数，防止this指向错误。提供了一份完整的代码实现。

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

效果：
在这里插入图片描述

一、在utils文件加下创建globalFunction.js文件

export default {
   
   
    //防抖
    debounce(func, wait) {
   
   
        let timeout;
        return function () {
   
   
            const context = this;
            const args = [...arguments];
            if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
   
   
                func.apply(context, args)
            }, wait)
        }
    },
    //节流
    throttle(func, wait) {
   
   
        let timeout;
        return function () {
   
   
            let context = this;
            let args = ar