防抖函数--应用场景及示例

防抖函数--应用场景及示例

1.当短时间内出现多次调用同一个东西的时候-可以使用

场景1

接口多次相应401--但是只需要提醒一次

javascript 复制代码
//time 为全局变量
let time;


axios.interceptors.response.use(
  function (response) {
    if (response.data.code === 401) {
      //当401时清除缓存信息
     
        // Message.error(response.data.msg);
      
        //搞个节流函数--------------此处为防抖函数
        let flagT = false;
        clearTimeout(time);
        time = setTimeout(() => {
          flagT = true;
          if (flagT) {
            Message.error(response.data.msg);
          }
        }, 500);
      // 重定向到登录页
      router.replace({
        path: "/",
      
      });
      return;
    }

    return response;
  },
  function (error) {
    // 对响应错误做点什么
    // loadingInstance.close();
    return Promise.reject(error);
  }
);

场景2

还有一个场景用的比较多 --随窗口大小变化--更改echrts的大小这个经常会用到--与上边代码同理

诸君有用且点赞

相关推荐
魁首10 小时前
OpenAI Codex 深入剖析:下一代 AI 编程助手的架构与原理
前端·openai·ai编程
火星数据-Tina11 小时前
如何构建一个支持多终端同步的体育比分网站?
大数据·前端·数据库·websocket
IT_陈寒11 小时前
React 19 实战:5个新特性让你的开发效率提升50%!
前端·人工智能·后端
GuMoYu11 小时前
el-date-picker限制选择范围
前端·javascript·vue.js
a31582380611 小时前
Android 大图显示策略优化显示(二)
android·java·开发语言·javascript·kotlin·glide·图片加载
冴羽11 小时前
JavaScript Date 语法要过时了!以后用这个替代!
前端·javascript·node.js
加油乐11 小时前
react使用Ant Design
前端·react.js·ant design
OEC小胖胖11 小时前
05|从 `SuspenseException` 到 `retryTimedOutBoundary`:Suspense 的 Ping 与 Retry 机制
前端·前端框架·react·开源库
攀登的牵牛花11 小时前
前端向架构突围系列 - 框架设计(三):用开闭原则拯救你的组件库
前端·架构