最简单，最优雅的方式解决防抖问题，兼容Vue3，Vue2和原生JS。

最新推荐文章于 2024-07-25 10:54:43 发布

HaooNAME

最新推荐文章于 2024-07-25 10:54:43 发布

阅读量1.1k

点赞数 6

分类专栏： js vue3 防抖文章标签： javascript vue.js html html5

本文链接：https://blog.csdn.net/weixin_43564110/article/details/116931424

版权

本文介绍了一种使用Promise和Class语法解决防抖问题的方法，该方法兼容Vue2、Vue3和原生JavaScript。传统的防抖方案存在this指向问题和Vue2、Vue3的兼容性问题。新方案利用Promise使代码同步化，避免传入函数参数和关心执行上下文，只需在需要防抖的场景下创建新的Debounce实例。在Vue3的setup和Vue2的methods中，以及原生JS环境中都可以优雅地应用，但可能需要为不同场景创建多个实例，并依赖Babel进行低版本浏览器兼容。

摘要由CSDN通过智能技术生成

今天突然心血来潮想封装防抖，但是发现百度出来的，并不能适用于大部分情况，所以今天自己尝试换一种思路去解决这个问题。

关于传统的方案，主要都有以下问题：

1.this的问题
一般情况下，我们可以直接传入一个可执行函数，防抖函数通过闭包，return一个setTimeout包裹的函数回来。但是vue2中我们写在methods里的方法，是通过this调用的。这种不合适。

function debounce(fn,wait){
   
    var timer = null;
    return function(){
   
        if(timer !== null){
   
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}

2.兼容问题
针对这种问题，我们可以简单改造一下，封装一个vue2版本的。但是这种情况下，我们需要在methods定义多一遍函数，另外vue3的setup中并没有this，因此也不兼容。

 // fnName为string
function Vue2Debounce(fnName, time) {
   
  let timeout = null;
  return function() {
   
    if (timeout) {
   
      clearTimeout(timeout);</