【Javascript】防抖函数--闭包的应用

最新推荐文章于 2022-11-25 17:06:27 发布

王昱潇

最新推荐文章于 2022-11-25 17:06:27 发布

阅读量101

点赞数

分类专栏：前端学习笔记文章标签： js javascript

本文链接：https://blog.csdn.net/qs52955339/article/details/115511483

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

学习笔记

36 篇文章 0 订阅

订阅专栏

防抖函数：

当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次。

如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

实际应用：

1、使用echarts时，改变浏览器宽度的时候，希望重新渲染。

2、echarts的图像，可以使用此函数，提升性能。

3、在输入框输入结束n秒后才进行搜索请求，n秒内输入新的内容时则重新计时。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>防抖函数</title>
</head>
<body>
  <input type="text" id="input">

  <script>
    function debounce(callback, delay) {
      // timer变量需要一直保存在内存中
      let timer
      return function (arg) {
        clearTimeout(timer)
        timer = setTimeout(function (){
          callback(arg)
        }, delay)
      }
    }

    function fn(value) {
      console.log(value)
    }

    //需要达到的效果：键盘抬起且1秒之内键盘没有再输入内容，才输出最后一次输入的内容
    var input = document.getElementById('input')
    var debounceFn = debounce(fn, 1000)
    input.addEventListener('keyup', function(e){
      debounceFn(e.target.value)
    })

  </script>
</body>
</html>

以上仅为个人学习笔记。

王昱潇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】防抖函数--闭包的应用

防抖函数：当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次。如果设定的时间到来之前，又一次触发了事件，就重新开始延时。实际应用：1、使用echarts时，改变浏览器宽度的时候，希望重新渲染。2、echarts的图像，可以使用此函数，提升性能。3、在输入框输入结束n秒后才进行搜索请求，n秒内输入新的内容时则重新计时。例：<!DOCTYPE html><html><head> <meta ch..
复制链接

扫一扫