防抖操作基本使用方法

最新推荐文章于 2022-06-29 01:23:05 发布

chonyhaha

最新推荐文章于 2022-06-29 01:23:05 发布

阅读量867

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/chonyhaha/article/details/120909989

版权

当我们在滑动窗口侧边栏的时候，一般，我们不会希望在滑动过程中去记录每一个位置，而是，当每次停在某个位置的时刻去记录当下位置。又或者，在输入框输入内容，还没有输入完毕，后台已经擅自获取它的值了，造成了不必要的传输损耗。防抖，就是在事件执行一次之后对数据进行记录，可以理解为，对事件的一次监听处理完毕以后记录数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖操作</title>
    <style>
        .block1{
            width: 300px;
            height: 300px;
            overflow-y: auto;
            background-color: #ccc;
        }
        .block2{
            width: 200px;
            height: 500px;
            background-color: aqua;  
        }
    </style>
</head>
<body>
    <div class="block1">
        <input class="username" type="text" name="用户名" placeholder="请输入用户名">
        <div class="block2">
            <input class="password" type="password" name="密码" placeholder="请输入密码">
        </div>
    </div>
</body>
<script type="text/javascript" src="debounce.js"></script>
</html>

// 以上代码属于结构化语句与修饰语句。
// 提示，js代码需要放在尾部，等待 html页面代码加载完毕以后加载，不然的话，会出现某些documenElement无法找到的一个问题

// 防抖操作
var myDate = new Date();
function debounce(fn,delay){
    let timer = null;  //借助闭包,就是在观察当前函数是否在计时
    return function(){
        if(timer){   
    // 该分支说明当前正在一个计时过程中，并且触发了相同事件。需要重新计时
        clearTimeout(timer)
        timer = setTimeout(fn,delay)      
        }else{
            timer = setTimeout(fn,delay)
        }  // 该分支说明没有计时,重新开始计时
    }
}

function sayHello(){
    console.log("hello world"+myDate.getSeconds());
}

// 滚动条
function showTop(){
     var scrollTop = document.getElementsByClassName("block1")[0].scrollTop;
     console.log('滚动条位置：'+scrollTop)
}

var user = document.getElementsByClassName("username")[0]
user.addEventListener('keyup',debounce(sayHello,1000));

var scrollListen = document.getElementsByClassName("block1")[0]
scrollListen.addEventListener('scroll',debounce(showTop,1000))

本代码是对input输入框内容、div的侧边下拉框进行防抖操作。

// 代码是完整的，对其命名之后就可以运行啦

说些题外话。有时候，我会比较头疼，大概是因为人比较敏感的缘故。但是我想呢，同样存在比较多的人为其他事情发愁
希望你不畏艰难，心里少流泪。

chonyhaha

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
防抖操作基本使用方法

当我们在滑动窗口侧边栏的时候，一般，我们不会希望在滑动过程中去记录每一个位置，而是，当每次停在某个位置的时刻去记录当下位置。又或者，在输入框输入内容，还没有输入完毕，后台已经擅自获取它的值了，造成了不必要的传输损耗。防抖，就是在事件执行一次之后对数据进行记录，可以理解为，对事件的一次监听处理完毕以后记录数据。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
复制链接

扫一扫