vue2 窗口缩放配合防抖函数使用

白术IT

已于 2023-02-08 11:44:35 修改

阅读量201

点赞数

文章标签： javascript 前端 vue Powered by 金山文档

于 2023-02-08 10:51:10 首次发布

本文链接：https://blog.csdn.net/m0_61217551/article/details/128931340

版权

先在工具类定义防抖函数 utils/common.js

/**
 * 防抖函数，let fun = debounce(callback, 1000) 再运行fun(),这样使用
 * @param {*} callback 方法
 * @param {*} wait 延迟时间
 * @example  
 * @return  
 * 
 */
function debounce(callback, wait) {
    let timer
    return function (arg) {
        clearTimeout(timer)
        timer = setTimeout(function () {
            callback(arg)
        }, wait)
    }
}

在vue中的应用

<script>
import utils from "@/utils/common"
export default {
    data() {
        return {
            screenWidth: null,
            resetGraph: null
        }
    },
    watch: {
        screenWidth: {
            handler: function (newval, oldval) {
                if (newval == null || oldval == null) return
                this.resetGraph()
            },
            immediate: true,
            deep: true
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.resetGraph = utils.debounce(this.resizeFun, 1000)
            this.screenWidth = document.body.clientWidth
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth
                })()
            }
        },
        resizeFun() {
            console.log('防抖测试')
            //业务函数
            this.graph()

        }
    }
}
</script>