防抖节流.

短暂又灿烂的

于 2021-12-10 11:14:11 发布

阅读量154

点赞数

分类专栏：优化方案文章标签：防抖节流

本文链接：https://blog.youkuaiyun.com/weixin_42232156/article/details/121827917

版权

优化方案专栏收录该内容

38 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了防抖和节流技术在页面性能优化中的应用。防抖常用于搜索框，通过设置定时器避免频繁发送请求，而节流则适用于触底加载场景，防止过度请求。这两者都是为了有效控制事件触发的频率，提升用户体验。

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

防抖

解决页面中的搜索框频繁输入导致频繁发送请求损耗性能的问题；可以设置一个定时器，用下一次的执行来清除上一次的预执行。

clearTimeout(this.TimeId);
    this.TimeId = setTimeout(() => {
      // 4 拼接接口路径
      this.getGoodsBySearch(value);
    }, 1000);

节流

解决页面在触底后频繁发送请求导致损耗性能的问题。

<!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>
    *{
      margin: 0;
      padding: 0;
      box-s