函数节流、函数防抖【实践】

最新推荐文章于 2024-09-11 15:33:18 发布

iamjwe

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量359

点赞数 2

分类专栏：面试考点文章标签： javascript

来自清心的博客

本文链接：https://blog.csdn.net/jw2268136570/article/details/105179390

版权

面试考点专栏收录该内容

7 篇文章 1 订阅

订阅专栏

实践后加深的理解

函数节流

什么是函数节流？

需要频繁触发的函数，在规定时间内（绝对时间差），只让第一次生效，后面的不生效。

有什么特点？（函数执行后，lastTime才被重新赋值）

一个时间差内被续触发，一定会执行一次。
多个时间差内连续触发，最终执行多次。

有什么使用场景？

滚动条事件的监听
。。。（尴尬，博主经验较少，大家理解了按需使用就行，哈哈）。

函数防抖

什么是函数防抖？

需要频繁触发的函数，在规定时间内（相对时间差），只让最后一次生效，前面的不生效。

有什么特点？（函数触发后，timer就会清除重建）

一个时间差内连续触发，不一定会执行一次。
多个时间差内连续触发，最终执行一次。

有什么使用场景？

做搜索提示业务时，用户不断输入值，事件回调函数不断被触发，对该事件回调函数使用函数防抖技术，在输入相对稳定时再发送请求以减少请求次数。
。。。（尴尬，博主经验较少，大家理解了按需使用就行，哈哈）。

两者异同

同：节流/防抖后，函数每次触发不一定每次执行，两者都可以用来在约束函数在规定时间内只执行一次。
异：节流、防抖的规定时间概念不同，函数节流中的规定时间是个绝对时间差不会被刷新，而函数防抖中的规定时间是个相对时间差会被刷新。

实践过程

运行结果

在这里插入图片描述

结果分析

前四个节流输出

疯狂点击四秒多钟，btn1的点击事件函数不断被触发，但因为被节流了，所以每秒输出一个，最终有四个输出。

最后一个防抖输出

疯狂点击好多秒钟，btn2的点击事件函数不断被触发，但因为被防抖了，所以前几秒都没有输出，停止点击等待一秒后才出现一个输出。

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数节流、函数防抖</title>
</head>
<body>
<button id="btn1">函数节流</button>
<button id="btn2">函数防抖</button>
<script type="text/javascript">
    function throttle(fn,delay){
        let lastTime = 0;
        return function(){
            let nowTime = Date.now();
            if(nowTime-lastTime>delay){
                fn.call(this);
                lastTime = nowTime;
            }
        }
    }
    document.getElementById('btn1').onclick = throttle(function(){console.log('函数节流，执行时间：'+Date.now())},1000);

    function debounce(fn,delay){
        let timer = null;
        return function (){
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn.call(this);
            },delay)
        }
    }
    document.getElementById('btn2').onclick = debounce(function(){console.log('函数防抖，执行时间：'+Date.now())},1000)
</script>
</body>
</html>