js实现搜索框的节流与防抖

最新推荐文章于 2024-05-19 15:43:08 发布

么灬名字

最新推荐文章于 2024-05-19 15:43:08 发布

阅读量1.1w

点赞数 5

分类专栏： js基础文章标签：节流防抖

本文链接：https://blog.csdn.net/weixin_45021098/article/details/90403385

版权

js基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

js处理搜索框，节流与防抖

在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，每过500ms就查询一次相关字符串，这就是节流。

防抖

节流的实现思路：每次触发事件时都取消之前的延时调用方法：

var timer = null
    function input1 () {
      clearTimeout(timer)
      timer = setTimeout(function () {
        // ajax()
        console.log(document.getElementById('input1').value)
      }, 500)
    }

节流

防抖的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

var flg = false
    function input2 () {
      if (flg) {
        return false
      }
      flg = true
      setTimeout(function () {
        // ajax()
        console.log(document.getElementById('input2').value)
        flg = false
      }, 500)
    }

以下是完整示例代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="">
      抖动示例：<input id='input1' type="text" name="" value="" onkeydown="input1()">
    </div>
    <div class="">
      节流示例：<input id='input2' type="text" name="" value="" onkeydown="input2()">
    </div>
  </body>
  <script>
    // 防抖
    var timer = null
    function input1 () {
      clearTimeout(timer)
      timer = setTimeout(function () {
       // ajax()
        console.log(document.getElementById('input1').value)
      }, 500)
    }
    // 节流
    var flg = false
    function input2 () {
      if (flg) {
        return false
      }
      flg = true
      setTimeout(function () {
       // ajax()
        console.log(document.getElementById('input2').value)
        flg = false
      }, 500)
    }
  </script>
</html>

么灬名字

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
3
评论
js实现搜索框的节流与防抖

js处理搜索框，节流与防抖防抖节流以下是完整示例代码：在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。防抖防抖的实现思路：每...
复制链接

扫一扫