前端面试——防抖节流

最新推荐文章于 2024-06-20 12:44:59 发布

DW14687

最新推荐文章于 2024-06-20 12:44:59 发布

阅读量445

点赞数

分类专栏：面试题目文章标签：前端 javascript

本文链接：https://blog.csdn.net/DW14687/article/details/127426092

版权

面试题目专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文深入探讨了防抖和节流的概念及其应用场景。防抖技术常用于限制函数的频繁执行，例如页面尺寸变化时的Echarts图表更新、防止按钮重复调用等，而节流则确保在设定的时间间隔内只执行一次操作，如滚动事件处理或定时播放。通过setTimeout和闭包，防抖利用延迟执行避免资源浪费，节流则通过判断定时器状态来控制执行频率。文章提供了防抖和节流的代码示例，帮助读者理解其工作原理。

摘要由CSDN通过智能技术生成

前言

不管是在工作中还是面试中我们都会遇见这个词语：防抖节流，那么今天我们就讲一讲防抖节流到底有什么作用，应用在什么场景、如何实现和原理~

感兴趣就继续往下看看把

一、防抖？

1.防抖

无论在n秒内触发了多少次事件，只执行最后一次

2.防抖功能及应用场景

根据防抖的定义，我们都知道用于需要完成一个动作后一段时间再执行，比如：

· 1.使用echarts图表，改变网页大小的时候

2.阻止按钮在一定时间内被重复调用，如发送短信后的倒计时

3.自动保存功能实现

4.常用的搜索联想

3.原理

上面已经说了防抖的原理就是利用setTimeout和闭包来实现的延迟执行，下面我们一起来看看把~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖</title>
</head>
<body>
<input type="text">
<script>
    //获取input元素
    const inputText = document.getElementsByTagName('input')[0]

    function antiShake(delay,callBack){
        let timer;
        return function (value) {
            clearTimeout(timer),//清除计时器
            timer = setTimeout(function () {
                callBack(value)//执行行为
            },delay)
        }
    }
    //定义要执行什么行为
    function message(value) {
        console.log(value)
    }
    //定义闭包返回的这个函数
    const hightFun = antiShake(1000,message);
    //监听input事件，并执行行为
    inputText.addEventListener('input',function (e) {
        hightFun(e.target.value)

    })
</script>
</body>
</html>

很明显，就是监听input事件，然后调用一个闭包函数，这个函数用setTimout延迟执行，如果在这期间再次触发input事件，那么清空定时器，重新开始计时~

二、节流？

1.节流

在n秒内，无论触发了多少次事件，只执行一次（第一次）

2.防抖功能及应用场景

1.滚动条下拉，每隔一段时间计算一次

2.播放计事件

3.原理

节流和防抖差不多，节流也用到了setTimeout，但是呢，节流会判断是否在这个时间内，如何判断呢，就是判断这个定时器是否还存在，不存在才执行事件，并且执行完后要初始化timer为null

代码如下~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流</title>
</head>
<body>
<button id="submit">提交</button>
<script>
    //获取input元素
    const submitBtn = document.getElementById('submit')

        function throttle(delay,callBack){
        let timer;
        return function () {
            //没有timer的时候才执行
            if(!timer){
                timer = setTimeout(function () {
                    callBack()//执行行为
                    timer =null //执行完后赋值为null
                },delay)
            }
        }
    }
    //定义要执行什么行为
    function message(value) {
        console.log("你好")
    }
    //监听点击事件，并执行行为
    submitBtn.onclick =throttle(2000,message)

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

总结

以上就是今天要讲的内容，本文仅仅简单防抖和节流并且讲解了原理，希望对大家有用把~

DW14687

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试——防抖节流

不管是在工作中还是面试中我们都会遇见这个词语：防抖节流，那么今天我们就讲一讲防抖节流到底有什么作用，应用在什么场景、如何实现和原理~感兴趣就继续往下看看把一、防抖？1.防抖无论在n秒内触发了多少次事件，只执行最后一次以上就是今天要讲的内容，本文仅仅简单防抖和节流并且讲解了原理，希望对大家有用把~。
复制链接

扫一扫

专栏目录