JavaScript中函数的防抖与节流详解

 更新时间:2022年02月22日 15:53:29   作者:大聪明码农徐  
这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

一、函数的节流

1.1 定义

同时触发多次函数执行,执行的是相同内容,要求只执行第一次请求。

例如scroll事件,鼠标滚动一次触发多次函数执行,只需要执行一次。

1.2 解决方法

定义类似于开关的效果,定义一个变量储存默认值,触发执行之前先判断变量存储的数据,如果是原始数据赋值变量新数据,如果不是原始数据,执行return 终止之后程序的执行。

1.3 案例演示

这里我们先写一个窗口监听事件。

1.3 .1  代码演示

<!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>Document</title>
    <style>
        body{
            //设置高度让页面显示滚动条
            height: 4000px;
        }
    </style>
</head>
<body>
    <script>
        // 创建窗口监听事件
        window.addEventListener("scroll",function(){
            fun();
        })
        // 随便写一个后台输出函数
        function fun(){
            console.log(666);
            console.log(888);
 
        }
    </script>
</body>
</html>

1.3 .2  运行结果

可以看到,博主只拨动了一次鼠标的滚轮,但是函数却执行了不止一次。

函数的节流就是要做到,滚动一次,执行一次函数,后台输出一次结果。

1.3 .3  添加函数节流操作

<!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>Document</title>
    <style>
        body{
            height: 4000px;
        }
    </style>
</head>
<body>
    <script>
        // 创建窗口监听事件
        // 存储一个默认值为true
        let flag = true ;
        // 窗口监听事件
        window.addEventListener("scroll",function(){
            if( flag ){
                    flag = false ;
                }else{
                    return ;
                }
                fun();
        })
        // 随便写一个后台输出函数
        function fun(){
            // document.write('已经到达1000px的上卷高度了')
            console.log(666);
        }
    </script>
</body>
</html>

1.3 .4  运行结果 

二、函数的防抖

2.1  定义

同时触发多次函数执行,只执行最后一次请求,多次触发的函数程序结果是不同的。

2.2  解决方法

通过延时器延迟时间执行程序,先清除定时器,再触发定义的新的延时器执行函数程序。

2.3  案例演示

这里我们先写一个input输入数据事件。

2.3.1  代码展示

<!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>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 获取标签
        const oIpt = document.querySelector('input');
        // input输入事件监听
        oIpt.addEventListener('input',function(){
            console.log(`您输入了${oIpt.value.length}个字`);
        })
 
    </script>
</body>
</html>

2.3.2  运行结果

这里我判断的是输入字符串的长度,可以看到输出结果由1-5个字,最后打出中文又变回了2个字符。那防抖的操作就是我只打出最后一个“你好”这串字符的长度。

也就是同时触发多次函数请求,只执行最后一次

2.3.3 添加函数防抖操作

<!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>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 获取标签
        const oIpt = document.querySelector('input');
        // input输入事件监听
        oIpt.addEventListener('input',function(){
            
            // 先清除定时器
            clearInterval( time );
 
            // 定义延时器 延迟执行 函数程序 
               time = setTimeout( function(){
                
                // 延时器 延迟一秒 执行程序
                setPage() ;
 
            } , 2000 );
            
        })
        function setPage(){
            console.log(`您输入了${oIpt.value.length}个字`);
        }
 
    </script>
</body>
</html>

2.3.4  运行结果

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注程序员之家的更多内容!    

相关文章

  • js获取指定字符前/后的字符串简单实例

    js获取指定字符前/后的字符串简单实例

    下面小编就为大家带来一篇js获取指定字符前/后的字符串简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Fundebug支持监控微信小程序HTTP请求错误的方法

    Fundebug支持监控微信小程序HTTP请求错误的方法

    这篇文章主要介绍了Fundebug支持监控微信小程序HTTP请求错误的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JS动态修改iframe内嵌网页地址的方法

    JS动态修改iframe内嵌网页地址的方法

    这篇文章主要介绍了JS动态修改iframe内嵌网页地址的方法,涉及javascript动态修改iframe中src属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • js获取元素的外链样式的简单实现方法

    js获取元素的外链样式的简单实现方法

    下面小编就为大家带来一篇js获取元素的外链样式的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js中的this作用域全解析

    js中的this作用域全解析

    这篇文章主要介绍了js中的this作用域全解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • JavaScript 悬浮窗口实现代码

    JavaScript 悬浮窗口实现代码

    主要是window.onscroll的运用
    2009-02-02
  • 基于Echart实现折线图的绘制详解

    基于Echart实现折线图的绘制详解

    EChart开源来自百度商业前端数据可视化团队,基于html5?Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。本文将利用EChart实现折线图的绘制,感兴趣的可以学习一下
    2022-03-03
  • 微信小程序实现左侧滑栏过程解析

    微信小程序实现左侧滑栏过程解析

    这篇文章主要介绍了微信小程序实现左侧滑栏过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript直播评论发弹幕切图功能点集合效果代码

    JavaScript直播评论发弹幕切图功能点集合效果代码

    这篇文章主要介绍了JavaScript直播评论发弹幕切图功能点集合效果代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery实现右侧栏菜单选择操作

    jquery实现右侧栏菜单选择操作

    这篇文章主要为大家详细介绍了jquery实现右侧栏菜单选择操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论

?


http://www.vxiaotou.com