js高级之防抖

最新推荐文章于 2022-11-25 10:29:12 发布

JQ...

最新推荐文章于 2022-11-25 10:29:12 发布

阅读量184

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42201272/article/details/105347232

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <input type="text" class="search" />
  <body>
    <script>
      // 防抖进行一个事件的时候比如输入事件 每次输入就会触发，如果我们发送请求的时候
      // 会浪费掉很多资源 此时我们需要进行阻止重复发送无用请求 因此出现了防抖这个方法
      var search = document.querySelector('.search')

      search.oninput = debounce(function (e) {
        console.log(this, e)
      })
      function debounce(callback, t = 300) {
        var timer = null
        return function () {
          clearTimeout(timer)
          timer = setTimeout(() => {
            console.log(this)

            callback & callback.call(this, ...arguments)
          }, t)
        }
      }
    </script>
  </body>
</html>

JQ...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高级之防抖

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
复制链接

扫一扫