防抖笔记啊

最新推荐文章于 2024-08-27 13:38:21 发布

LL_wjj

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量72

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wajueju/article/details/124636235

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

10.防抖

1、定义：

当持续触发时间一定时间内没有再出发事件事件处理函数才会执行一次如果设定的时间到来之前，又一次触发了事件那么就得重新开始延时

触发事件一定时间内没有触发事件执行肯定是定时器

在设定的时间内，有一次触发了事件，重新开始延时，代表的就是重新开始定时器）

意味着上一次还没有结束的定时器要清除掉，重新开始。

2、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖函数</title>
</head>
<body>
    <input type="test" id="input">

    <script type="text/javascript">
        var input = document.getElementById('input')

        // 防抖函数
        // function debounce(delay, value){
        //   let timer
        //   clearTimeout(timer)
        //   // 这里会有问题，因为 timer 是在清除的下边定义的，所以这里的清除 是无法清除掉这个定时器的
        //   // 所以 timer 变量需要一直保存在内存当中
        //   // 如何让 变量 timer 一直再内存当中，  内存的泄露 ， ===》 闭包
        //   timer = setTimeout(function (){
        //     console.log(value);
        //   }, delay)
        // }
        // 我需要的是，输入框的结果，只出现一次，并且是在键盘抬起不在输入后的一秒之后再进行输出
        function debounce(delay, callback){
          let timer
          return function (value){
            clearTimeout(timer)
            // 这里会有问题，因为 timer 是在清除的下边定义的，所以这里的清除 是无法清除掉这个定时器的
            // 所以 timer 变量需要一直保存在内存当中
            // 如何让 变量 timer 一直再内存当中，  内存的泄露 ， ===》 闭包

            // 我不想让 输出的函数再我的 定时器里边，我想要在外面输出，需要使用 到callback函数
            timer = setTimeout(function (){
              callback(value)
            }, delay)
          }
        }

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

        var debounceFunc = debounce(1000, fn)
        // 监听键盘事件
        input.addEventListener('keyup', function (e){
          debounceFunc(e.target.value)
        })

        // 闭包 ： 函数里边 return 出函数
    </script>
</body>
</html>

LL_wjj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖笔记啊

10.防抖1、定义：当持续触发时间一定时间内没有再出发事件事件处理函数才会执行一次如果设定的时间到来之前，又一次触发了事件那么就得重新开始延时触发事件一定时间内没有触发事件执行肯定是定时器在设定的时间内，有一次触发了事件，重新开始延时，代表的就是重新开始定时器）意味着上一次还没有结束的定时器要清除掉，重新开始。2、代码实现<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫