防抖、节流 ╰半橙微兮° 2022-09-14 09:23 219阅读 0赞 **防抖：只要用户触发事件，清除定时器，重新开始记时，避免全局污染，选择使用闭包实现效果。** **节流：让用户在一段时间之内，只能执行一次。** **判断当前的tag，tag是true允许执行，tag是false不允许执行，到时间之后重新变为可执行状态** **防抖封装的函数以及实例如下：** ** css:** <style> div{ width: 100%; height: 300px; background: #ccc; text-align: center; line-height: 300px; font-size: 40px; } </style> **html:** <div>0</div> **javascript: ** <script> // 当鼠标滑动的时候 对n进行累加 div的内容显示n var n = 0; // 事件三部曲 // 获取元素 var div = document.getElementsByTagName('div')[0]; // 加事件 div.onmousemove = debounce(100, a); function a() { n++; // div的内容显示n div.innerHTML = n; } // 防抖和节流 // 防抖: 只要用户触发事件, 清除定时器, 重新开始计时 // 避免造成全局污染 选择使用闭包实现效果 function debounce(date, fn) { // 声明一个变量 用来接收定时器的唯一标识 var timer = null; // 内部函数表示事件处理函数 function inner() { // 清除定时器 clearTimeout(timer); // 重新开始计时 timer = setTimeout(fn, date); }; // 设置返回值 return inner; } </script> **节流封装的函数以及实例如下：** **css:** <style> div{ width: 100%; height: 300px; background: #ccc; text-align: center; line-height: 300px; font-size: 40px; } </style> **html:** <div>0</div> **javascript:** <script> // 当鼠标滑动的时候 对n进行累加 div的内容显示n var n = 0; // 事件三部曲 // 获取元素 var div = document.getElementsByTagName('div')[0]; // 加事件 div.onmousemove = throttle(500, a); function a() { n++; // div的内容显示n div.innerHTML = n; } // 防抖和节流 // 节流: 让用户在一段时间之内 只能执行一次 // 判断当前的状态tag tag是true 允许用户执行 tag是false不让执行 // 到时间之后重新变成可执行状态 function throttle(date, fn) { // date: 间隔时间 // fn: 执行的函数 // 声明一个变量 接收唯一标识 var timer = null; // 假设一个可以执行的状态 var tag = true; // 内部代码 表示 用户的事件处理函数 function inner() { // 判断函数是否可以执行 if(tag){ timer = setTimeout(function () { fn(); // 当定时器函数执行的时候 表示用户的间隔时间已经到了 // 将tag = true tag = true; // 定时器执行后 清除定时器 clearTimeout(timer); }, date); // 更新状态 tag = false; } } // 设置返回值 return inner; } </script>
相关 防抖、节流 原生js中 简单实现： function a() { console.log('触发了！！！') } // 节流： 规定的时间内 我会带着你远行/ 2023年07月12日 03:34/ 0 赞/ 39 阅读
相关 防抖节流 故心故心故心故心小故冲啊 -------------------- 文章目录 防抖 节流 总结 -------------------- 防抖 r囧r小猫/ 2023年01月12日 11:36/ 0 赞/ 161 阅读
相关 javascript 防抖、节流 一、防抖 > 防抖——触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再 次被触发，则重新计算时间； 1. 原理 短时间内多次触发同一事件 左手的ㄟ右手/ 2022年12月18日 15:56/ 0 赞/ 163 阅读
相关 防抖节流 防抖(debounce) 从滚动条监听的例子说起 先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们 叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 226 阅读
相关 防抖、节流 防抖：只要用户触发事件，清除定时器，重新开始记时，避免全局污染，选择使用闭包实现效果。 节流：让用户在一段时间之内，只能执行一次。 判断当前的tag，tag是true允许执 ╰半橙微兮°/ 2022年09月14日 09:23/ 0 赞/ 220 阅读
相关 防抖和节流 1. 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function 朱雀/ 2022年03月18日 01:44/ 0 赞/ 315 阅读
相关 节流、防抖 节流和防抖主要处理事件处理函数高频调用，减少浏览器负担 节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t 向右看齐/ 2022年01月30日 00:39/ 0 赞/ 350 阅读
相关 防抖和节流 防抖和节流 一、什么是防抖 二、防抖使用场景 1.输入框是按键触发请求时 三、什么是节流 四、节流的使用场景 1.鼠标连续 快来打我*/ 2021年09月07日 06:13/ 0 赞/ 495 阅读
相关 防抖节流 通过闭包返回的函数来进行操作,使得变量一直存在 防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado 不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 464 阅读
相关 防抖节流 vue代码 防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){ 妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 483 阅读
我会带着你远行
r囧r小猫
左手的ㄟ右手
朱雀
向右看齐
不念不忘少年蓝@
还没有评论，来说两句吧...