首页 > 编程语言 >JavaScript 节流和防抖

JavaScript 节流和防抖

时间:2022-10-26 22:31:07浏览次数:49  
标签:function 触发 防抖 节流 JavaScript 事件 函数

前言

本文主要记录了JavaScript 节流和防抖,节流和防抖本质上是优化执行高频率代码的一种手段。

例如:浏览器的 mousemoveresizescroll 等事件在触发时,会不断地调用绑定的事件函数极大地降低了前端的性能。

为了性能优化,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce)节流(throttle) 的方式来减少调用频率。

防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

防抖原理

维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,都会清除当前的 timer 然后重新设置超时调用,即重新计时

防抖缺点

如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟执行;

示例代码

	//防抖debounce代码:
	function debounce(fn) {
	    let timeout = null;
	    return function () {
	        clearTimeout(timeout); 
	        timeout = setTimeout(() => {
	            fn.apply(this, arguments);
	        }, 500);
	    };
	}
	// 处理函数
	function handle() {
	    console.log(Math.random());
	}
	// 给 window 添加滚动事件
	window.addEventListener('scroll', debounce(handle));

节流

高频事件触发,但在n秒内只会执行一次,节流会稀释函数的执行频率

节流原理

通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。

原理是通过判断是否有延迟调用函数未执行。

示例代码

        //函数节流锁
        function throttle(fn, delay) {
            let Lock = true; 
            return function () {
                if (!lock) return;
                lock = false;
                setTimeout(() => { 
                    fn.apply(this, arguments);
                    lock = true;
                }, delay);
            };
        }

对比总结

图片来源于网络侵权必删

  • 函数防抖:将多次操作合并为一次操作进行

  • 函数节流:使得一定时间内只触发一次事件函数

本文到此结束

如果大家还有什么其他想法,欢迎在评论区交流!

标签:function,触发,防抖,节流,JavaScript,事件,函数
From: https://blog.51cto.com/u_15718546/5798606

相关文章

  • javascript编程单线程之异步模式Asynchronous
    异步模式Asynchronous不会等待这个任务结束才开始执行下一个任务,开启之后立即执行下一个任务,后续逻辑一般会通过回调函数的方式定义,异步模式对js非常重要,没有异步任务单......
  • JavaScript works behind the scenes —— execution context(执行上下文)
    JavaScriptworksbehindthescenes——executioncontext(执行上下文)Whatisexecutioncontext?什么是执行上下文EnvironmentinwhichapieceofJavaScriptise......
  • 防抖节流的含义使用场景及js实现原理
    1.防抖:n秒后在执行该事件,若在n秒内被重复触发,则重新计时。代码实现重在清零clearTimeout。应用:登录,提交,浏览器窗口的resizes事件,文本编辑保存//防抖函数f......
  • JavaScripts 小脚本实现格式化打印
    consttext=String.raw`{"success":true,"code":0,"message":null,"body":{"items":[{"isNonStandard":false,"productId":1813,"skuNumber":"H00027","manufacturerPart......
  • JavaScript高级程序设计笔记12 BOM
    BOMBOM的核心——window对象窗口和弹窗location对象——页面信息navigator对象——浏览器信息history对象——浏览器历史记录BOM是使用JavaScript开发Web应用程序的......
  • javascript 获取本机ip chrome 谷歌浏览器 extension 谷歌扩展
    代码一:if(typeofwindow!='undefined'){varRTCPeerConnection=window.RTCPeerConnection||window.mozRTCPeerConnection||window.webkitRTCPeerConnect......
  • JavaScript对象Global
    JavaScript对象GlobalGlobal1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();2.方法:......
  • javascript校验mac和ip
     1.校验mac:functionisValidMAC(mac){varreg=/^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/;returnreg.......
  • JavaScript对象RegExp1和JavaScript对象RegExp2
    JavaScript对象RegExp1RegExp:正则表达式对象1.正则表达式1.单个字符:[]如:[a][ab][a-zA-Z0-9_]特殊符号代表特殊含义的单个字符\d:单......
  • JavaScript实现 -- 顺序搜索
    顺序搜索顺序搜索是一种寻找某一特定值的搜索算法,按一定的顺序检查数组中每一个元素,直到找到所要寻找的特定值为止。顺序搜索是最简单的一种搜索算法。思路遍历数组,并对......