从搜索系统来聊聊防抖和节流

最新推荐文章于 2023-10-06 23:56:19 发布
最新推荐文章于 2023-10-06 23:56:19 发布
阅读量1.3k 收藏 9
点赞数 1

最近公司做一个内部的搜索系统，因为搜索框需要搜索功能需要频繁的去发送请求，这很明显的会给服务器带来压力，那么这时候就要用到防抖和节流的知识点了


防抖函数debounce

比如我们的百度搜索，搜索的时候有关键字的提醒，关键字的来源来自于客户端向服务端请求得到的数据，我们通过keyup事件去监听触发请求，如果返回值的搜索key已经不是搜索框现在的值，就丢弃掉这次返回，于是我们提出这样一个优化需求：触发事件，但是我一定在事件触发n秒后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行

那么我们来动手实现我们的第一版的防抖函数吧：

function debounce(fn,wait){
     let timeout
     return function(){
         if(timeout){
             clearTimeout(timeout)
         }
        timeout=setTimeout(fn,wait)
     }
}

第一版代码已经实现了，我们来写个demo验证下吧：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #search {
        width: 400px;
        margin-left: 300px;
        margin-bottom: 50px;
      }
      #showSearch {
        width: 800px;
        height: 100px;
        background: lightblue;
        color: red;
        margin-left: 300px;
      }
</style>
  </head>
  <body>
    <input type="search" name="" id="search" />
    <div id="showSearch"></div>
  </body>
  <script>
    function debounce(fn, wait) {
      let timeout;
      return function() {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(fn, wait);
      };
    }
    let search = document.querySelector("#search");
    let showSearch = document.querySelector("#showSearch");
    function getSearchInfo(e) {
       // showSearch.innerText = this.value; // 报错
      //  console.log(e); // undefined
      showSearch.innerText = search.value;
    }
    search.onkeyup = debounce(getSearchInfo, 1000);
</script>
</html>

效果图：

可以看到执行上面的demo，我们输入值以后不触发keyup事件就会隔1秒钟蓝色div才会出现字，如果你一直触发是不会显示的等到你停止触发后的一秒后才显示

有同学可能对第一版代码觉得挺简单的，确实简单，不过我还是要啰嗦几句，第一版的代码中，debounce函数返回了一个匿名函数，而这匿名函数又引用了timeout这个变量，这样就形成了闭包，也就是函数的执行上下文的活动对象并不会被销毁，保存了timeout变量，才能实现我们这个如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行的需求

修复this指向和event问题

显然上述中的代码还存留了二个问题就是this问题，我们this指向的不是window对象，而是指向我们的dom对象，第二个就是event对象，event对象在这里会报undefined，那么接下来我们来完善我们的第二版代码吧：

第二版本的防抖函数

 
function debounce(fn, wait) {
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
          fn.apply(context, args);
        }, wait);
      };
    }

第二版代码已经实现了，我们来写个demo验证下吧：

let search = document.querySelector("#search");
    let showSearch = document.querySelector("#showSearch");
    function getSearchInfo(e) {
      showSearch.innerText = this.value; 
      console.log(e); 
    }
    search.onkeyup = debounce(getSearchInfo, 1000);

效果图:

这里涉及的知识点就是this指向和arguments、apply等，先来说说arguments属性，我们知道可以通过arguments属性获取函数的参数值，而dom事件操作中，会给回调函数（这里回调函数是debounce函数返回的闭包函数）传递一个event参数,这样我们就可以通过arguments属性拿到event属性，那么问题二就解决啦，再来说说问题一的this指向，此时这里keyup事件的回调函数是debounce函数返回的闭包函数而不是getSearchInfo函数（但是我们希望处理业务逻辑的getSearchInfo的this指向能够指向dom对象），我们知道this的指向是我最后被谁调用，我就指向谁，那么我这里被search调用所以this指向search，但是由于有setTimeout异步操作，我们getSearchInfo函数的this指向是window（非严格模式下），所以我们需要改变getSearchInfo的指向，这样我们用apply就完美实现了


立即执行

这时候我们开发的问题解决了，但是万恶的产品又提出了一个新的需求方案：

我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行，那我们就来实现这个新需求吧

// 参数immediate值 true||false
    function debounce(fn, wait, immediate) {
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已经执行过，不再执行
          timeout = setTimeout(function() {
            timeout = null;
          }, wait);
          if (callNow) fn.apply(context, args);
        } else {
          timeout = setTimeout(function() {
            fn.apply(context, args);
          }, wait);
        }
      };
    }

demo使用:

search.onkeyup = debounce(getSearchInfo, 100, true);

效果图如下:

取消功能

虽然我们的防抖函数已经很完善了，但是我们希望它能支持取消的功能，那接着来完善我们的代码吧

第三版本的防抖函数

// 参数immediate值 true||false
    function debounce(fn, wait, immediate) {
      let timeout;
      let debounced = function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已经执行过，不再执行
          timeout = setTimeout(function() {
            timeout = null;
          }, wait);
          if (callNow) fn.apply(context, args);
        } else {
          timeout = setTimeout(function() {
            fn.apply(context, args);
          }, wait);
        }
      };
      debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
      };
      return debounced
    }

修复result bug

到此，我们的防抖函数基本实现了，但是细心的同学可能会发现，如果fn函数参数存在return值，我们需要去接收它，那么来修复这个小Bug吧

第四版本的防抖函数

// 参数immediate值 true||false
    function debounce(fn, wait, immediate) {
      let timeout, result;
      let debounced = function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已经执行过，不再执行
          timeout = setTimeout(function() {
            timeout = null;
          }, wait);
          if (callNow) {
            result = fn.apply(context, args);
          }
        } else {
          timeout = setTimeout(function() {
            result = fn.apply(context, args);
            console.log(result);
          }, wait);
        }
      };
      debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
      };
      return debounced;
    }

到这里我们的防抖函数已经实现了，大家可以动手实现下


防抖函数的总结

上面罗里吧嗦的说了一堆，实际上可以精简成两个需求

  • 非立即执行:，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行

  • 立即执行：我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行

我们可以按照立即执行和非立即执行这两个需求去理解我们的防抖函数


节流 throttle

持续触发事件，每隔一段时间，只执行一次事件。

节流相对来说还是很好理解了，当然了他也有跟防抖函数一样有立即执行和非立即执行两个需求，那我们实现throttle函数的代码吧


立即执行

我们可以使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0)，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行

function throttle(fn, wait) {
      let context, args;
      let previous = 0;
      return function() {
        let now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
          fn.apply(context, args);
          previous = now;
        }
      };
    }

demo使用：

demo跟上述防抖用是一样

 search.onkeyup = throttle(getSearchInfo, 3000);

这里的节流立即执行版跟我们的防抖第一版的知识点原理一样，不再过多的赘述。

非立即执行

非立即执行就是过了n秒后我们再执行，那么我们自然而然想到定时器

function throttle(fn, wait) {
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        // 这里不需要清除定时器 清除了会重新计算时间
        // 清除这个定时器不代表timeout为空
        if (timeout) {
          return false;
        }
        timeout = setTimeout(function() {
          fn.apply(context, args);
          timeout = null;
        }, wait);
      };
    }

demo使用

function getSearchInfo(e) {
      console.log(this.value);
      // 验证的效果是 showSearch多久才能读到这个this.value
      showSearch.innerText = this.value;

    }
    search.onkeyup = throttle(getSearchInfo, 3000);

这次的效果是等待过了三秒才执行，那我们来比较立即执行和非立即执行的效果

  • 立即执行会立刻执行，非立即执行会在 n 秒后第一次执行

  • 立即执行停止触发后没有办法再执行事件，非立即执行停止触发后依然会再执行一次事件


一统立即执行和非立即执行

我们的需求想要这样：我触发这个事件想要立即执行，事件停止触发后再执行一遍,也就是n秒内，假设我触发事件大于等于两次，先会立即执行，最后会再触发一次

 
function throttle(fn, wait) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 最后触发的函数
      let later = function() {
        previous = +new Date();
        timeout = null;
        fn.apply(context, args);
        console.log("最后执行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        // 下次触发fn剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
        // 如果没有剩余的时间
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
        } else if (!timeout) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }

效果图：

包含立即执行和非立即执行

有时候我们想要一种情况就行，想要立即执行不需要再去执行一次，或者想要最后执行一次，不需要立即执行，那我们对上述做个兼容

实现方式是定义一个options对象，禁止立即执行或者非立即执行

immediate：false 表示禁用第一次执行
last: false 表示禁用停止触发的回调
    function throttle(fn, wait, options) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 如果没有传options默认为空
      if (!options) {
        options = {}; // 虽然没有声明options, 相当于window.options={}
      }
      let later = function() {
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        console.log("最后执行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次触发 func 剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
        // 如果没有剩余的时间了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }

demo使用：

search.onkeyup = throttle(getSearchInfo, 3000, { immediate: true, last: false });

优化throttle函数

上述例子中我们使用了闭包，而闭包所引用的变量挺多的，但是一直没有被gc回收，我们来手动回收下这些变量

function throttle(fn, wait, options) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 如果没有传options默认为空
      if (!options) {
        options = {}; // 虽然没有声明options, 相当于window.options={}
      }
      let later = function() {
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        if (!timeout) context = args = null;
        console.log("最后执行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次触发 func 剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
        // 如果没有剩余的时间了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }


取消功能

我们再拓展个取消功能，取消功能实际就是取消定时器，让它在这一次事件触发中立即执行

function throttle(fn, wait, options) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等于null,代表定时器已经完成
      // 如果没有传options默认为空
      if (!options) {
        options = {}; // 虽然没有声明options, 相当于window.options={}
      }
      let later = function() {
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        if (!timeout) context = args = null;
        console.log("最后执行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次触发 func 剩余的时间
        remaining = wait - (now - previous);
        // 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
        // 如果没有剩余的时间了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 立即执行
          fn.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      throttled.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
        previous = 0;
      };
      return throttled;
    }

到这里我们的节流函数就基本实现完了，接下来那聊聊防抖函数和节流函数的区别吧

防抖和节流的区别

实际上防抖和节流都是限制一些频繁的事件触发（window 的 resize、scroll、mousedown、mousemove、keyup、keydown）,但他们还是有实质性的区别的

  • 防抖是虽然事件持续触发，但只有等事件停止触发后n秒才执行函数(如果你在时间内重新触发事件，那么时间就重新算，这是防抖的特点，可以按照这个特点选择场景)。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷，司机才开车。

  • 节流是持续触发的时候，每隔n秒执行一次函数比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释

总结

防抖函数和节流函数涉及到的知识点很多，他们以接收一个函数为参数，实际就是一个高阶函数，也用到了闭包，this指向，apply等知识点，当然函数的实现是参考大佬的博客，我这里就是做下记录以及总结


作者：vnues
链接：https://juejin.im/post/5d29abe3e51d45777b1a3e45
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端小苑-FE GDN
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue项目中搜索节流的实现代码
10-16
主要介绍了关于vue项目中搜索节流的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
防抖和节流的总结
yezi153的博客
11-27 1163
　防抖是将多次执行（触发）变为只执行一次，节流是将多次执行变为每隔一段时间执行 结合应用场景 　　防抖(debounce) 　　　　search搜索联想，用户在不断输入值时，用防抖来节约请求资源。 　　　　window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次 　　节流(throttle) 　　　　鼠标不断点击触发，mousedown(单位时间内只触发一次) 　　　　监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断 ...
vue2.0_搜索框之节流函数（解决事件频繁触发导致的频繁发起请求）
QiuRenBB的博客
02-09 1680
节流函数 前言   在我们项目中有一个比较常见的场景，我们要在input搜索框实时输入实时发送请求查询相关数据。但是实时的事件触发会导致请求被触发多次，过于频繁。为了解决这个问题，我们通过以下节流函数的方法来加以限制，以免浪费资源。 具体操作，请看一下的代码。 HTML //搜索框 <van-search clickable class="van-search" v-model="val" show-action placeholder="请
防抖和节流
奇奇的博客
05-21 852
防抖和节流的使用场景 防抖（debounce） 1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。 2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次 节流（throttle） 1.用户在输入框不断输入值时，每隔规定的时间来读取一次数据 input(单位时间内只触发一次) 2.轮播图在播放过程中,用户不断点击切换没有效果,只能在规定时间后才可以进行点击 防抖： 高频率触发的事件,在指定的单位时间内，只响应最后一次(后..
防抖与节流
l_y_h___的博客
10-08 243
防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。 防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。 应用场景： 1.有些项目中，我们要使用到实时搜索，有些情况下，可能用户没有输完内容，就开始搜索了，这样体验不佳，我们就可以加上节流的方案 2.当需要改变窗口大小，或者滚动条位置的获取，或者元素拖放时的位置获取时，一般我们只想要最后一次的
JS函数节流和防抖之间的区分和实现详解
10-17
本文主要介绍的是关于JS中比较常用的函数：节流函数和防抖函数，从概念、使用场景到代码简单实现做了一个详细的区分。感兴趣的小伙伴们可以参考一下
vue中使用防抖和节流
01-24
vue项目中防抖和节流的指令 在mian.js中use就可以全局使用了
防抖和节流Throttle and debounce.html
05-17
防抖和节流
JS函数节流和函数防抖问题分析
10-18
主要介绍了JS函数节流和函数防抖问题分析，非常不错，具有参考借鉴价值,需要的朋友可以参考下
js防抖和节流的深入讲解
10-17
主要给大家介绍了关于js防抖和节流的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS总结笔记：防抖动和节流
weixin_41350225的博客
02-15 663
针对一些会频繁触发的事件如用户的连续点击事件，鼠标滑轮滚动事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能 防抖动 防抖动：上次触发事件和这次触发之间满足一定的空闲时间，函数才执行一次 举例：百度搜索。一般搜索绑定输入事件（每次触发输入事件都会触发），如果触发一下就搜索一次，就会给服务器造成巨大压力。所以百度搜索利用防抖动：当用户一直在输入的时候，比如说规定时...
js 防抖与节流（setTimeout的应用）
tianmd_Eric的博客
09-03 2070
1.防抖（debounce） 防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉； 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms 如果在200ms内没有再次触发滚动事件，那么就执行函数 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时 效果：如果短时间内大量触发同一事件，只会执行一次函数。 ...
带你了解防抖与节流
weixin_48862362的博客
04-23 2278
相似点：都是为应对事件持续频繁发生，造成前端性能下降或对后端服务造成的压力。 区别：节流会不断的触发，而防抖仅在最后一次触发。防抖适用于，如搜索输入框提示，仅在输入停止后进行一次提示更新，以减少后台压力。节流适用于，如窗体以拖动的方式调整大小，在每次特定的时间片结束后触发一次窗体大小调整。 防抖 原理： 当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。 使用场景： 频繁触发按钮点击事件、input框搜索等等。 主要代码如下： <el-form-item label="整机名称"
前端js性能优化 ----节流和防抖
西装暴徒_12138的博客
08-08 320
这些是记录自己写的代码，方便以后回查 节流 // func是用户传入需要防抖的函数 // wait是等待时间 const throttle = (func, wait = 50) => { // 上一次执行该函数的时间 let lastTime = 0; return function() { // 当前时间 let now = +new Date() /...
搜索框模糊搜索 防抖&&节流
qq_45654741的博客
01-19 1347
函数防抖与节流
js防抖与节流详讲
qq_45442879的博客
01-03 1134
节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数 防抖只是在最后一次事件后才触发一次函数。
关于vue项目中搜索节流的实现
热门推荐
主要领域：前端开发
06-27 3万+
我们经常会遇到这种需求，现在我们在使用百度搜索的时候他们的思想也是 根据防抖节流而实现的，至于用防抖还是节流根据自己需求。 <template> <input type="text" v-model.trim="sse"> </template> <script> const delay = (function () { let time...
前端性能优化之防抖&节流
最新发布
~~~
10-06 2571
防抖和节流是前端开发中常用的两种性能优化技术。为什么需要防抖和节流呢？两者目的都是为了防止某个时间段内操作频繁触发，造成性能消耗。防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。节流： n 秒内只执行一次事件，即使n 秒内事件重复触发，也只有一次生效。
搜索请求如何处理（节流），防抖与节流，trottle函数实现
weixin_48786946的博客
06-19 1416
防抖和节流的作用都是防止函数多次调用。防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。 区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 运用：拍照、下拉触底加载下一页、点击触发的事件中 节流 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函.
axios防抖和节流
09-10
axios本身并不提供防抖和节流的功能，它是一个用于发起HTTP请求的库。防抖和节流是一种对事件处理函数进行优化的技术，可以用于限制函数的触发频率。在给定的时间间隔内，防抖只会执行最后一次触发的事件处理函数，而节流则会按照一定的时间间隔有规律地执行事件处理函数。这两种技术可以用于优化一些频繁触发的事件，如mousemove、scroll、resize、input等。 在你提供的引用中，第一个引用解释了防抖和节流的区别，第二个引用提到了一些使用防抖的场景，比如在window.onresize事件回调中触发echarts实例的重绘，或者在input标签的input事件中请求后端接口。但需要注意的是，这里提到的防抖并不是axios本身提供的功能，而是在使用axios发起请求时，可以结合防抖技术来控制请求的触发频率。 因此，在使用axios时，如果需要实现防抖或节流的功能，可以参考第二个引用中提到的场景，使用防抖或节流的方法来控制请求的触发频率，从而达到优化的效果。另外，第三个引用提到了在Vue中引入axios并将其加入Vue的原型中的方法，这是为了在Vue组件中方便地使用axios进行HTTP请求，与防抖或节流相关，只是为了提供一个便捷的请求方式，并不直接涉及防抖或节流的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值