JS优化，减少重复请求

最新推荐文章于 2024-04-16 11:59:09 发布

CrazBarry

最新推荐文章于 2024-04-16 11:59:09 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/CrazBarry/article/details/98207937

版权

本文介绍了如何通过使用节流和防抖技术来优化JavaScript代码，以减少网页中输入实时请求时产生的频繁HTTP请求。作者观察到公司网站在搜索框中输入时每次按键都会触发请求，为解决这个问题，他提出了这两种方法。节流函数适用于限制如按钮点击等操作的重复请求，而防抖函数则适用于控制如input监听事件引起的过多请求。

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

1.前言

无聊点点公司的网页，发现公司网站的一搜索请求是实时请求的，点开控制栏发现每输一个字符都会请求一次，虽然请求大小不大，但是这样不友好，为了减少请求次数，我给项目加了两个方法，分别是节流和防抖函数。

节流函数一般用于，类似按钮请求这些，防止你一秒点击多次按钮产生重复请求

防抖函数一般用于，类似实时监听input的请求，防止请求过多

2.代码

<!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>
</head>

<body>
  <input type="text" id="input">
  <div id="getVal">get</div>
  <script>
    //函数节流
    function throttle(fn, gapTime) {
      if (gapTime == null || gapTime == undefined) {
        gapTime = 1500
      }