跳至主要內容

36 【节流和防抖】

约 661 字大约 2 分钟...

36 【节流和防抖】

1.节流(throttle)

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数

开发使用场景 – 小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动 就可以加节流
假如一张轮播图完成切换需要300ms, 不加节流效果,快速点击,则嗖嗖嗖的切换,加上节流效果,不管快速点击多少次,300ms时间内,只能切换一张图片。
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #CCCCCC;
        line-height: 200px;
        text-align: center;
        font-size: 30px;
    }
</style>

<body>
<div>0</div>
<script type="text/javascript">
    let div = document.querySelector("div");
    let i = 0;

    function fun() {
        this.innerHTML = ++i;
    }

    function throttle(fn, time) {
        let startTime = 0;
        return function() {
            let nowTime = +new Date();
            if (nowTime - startTime >= time) {
                fun.bind(div)();
                startTime = nowTime;
            }
        }
    }
    div.addEventListener("mousemove", throttle(fun, 1000))
</script>

节流小案例-页面打开,可以记录上一次的视频播放位置

<script>
    /*两个事件:
    ①:ontimeupdate 事件在视频/音频(audio/video)当前的播放位置发送改变时触发
    ②:onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发(简单理解就是视频资源加载出来的时候)
    */

    // 1. 获取元素  要对视频进行操作
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(function() {
        localStorage.setItem("time", video.currentTime);
    }, 1000)
    // 打开页面触发事件,就从本地存储里面取出记录的时间, 赋值给
    video.onloadeddata = function() {
        video.currentTime = localStorage.getItem("time") || 0;
    }
</script>

2.防抖(debounce)

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间

开发使用场景- 搜索框防抖
假设输入就可以发送请求,但是不能每次输入都去发送请求,输入比较快发送请求会比较多
我们设定一个时间,假如300ms, 当输入第一个字符时候,300ms后发送请求,但是在200ms的时候又输入了一个字符,则需要再等300ms 后发送请求
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #CCCCCC;
        line-height: 200px;
        text-align: center;
        font-size: 30px;
    }
</style>

<body>
<div>0</div>
<script type="text/javascript">
    let div = document.querySelector("div");
    let i = 0;

    function fun() {
        this.innerHTML = ++i;
    }

    function debounce(fn, time) {
        let timer = null;
        return function() {
            if (timer) clearTimeout(timer);
            timer = setTimeout(fun.bind(div), time)
        }
    }
    div.addEventListener("mousemove", debounce(fun, 1000))
</script>
节流和防抖的使用场景是?
节流: 鼠标移动,页面尺寸发生变化,滚动条滚动等开销比较大的情况下
防抖: 搜索框输入,设定每次输入完毕n秒后发送请求,如果期间还有输入,则从新计算时间
已到达文章底部,欢迎留言、表情互动~
  • 赞一个
    0
    赞一个
  • 支持下
    0
    支持下
  • 有点酷
    0
    有点酷
  • 啥玩意
    0
    啥玩意
  • 看不懂
    0
    看不懂
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8