防抖和节流 梦里梦外; 2024-04-18 21:02 20阅读 0赞 在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢?一般来讲,防抖和节流是比较好的解决方案。 ## 1.防抖(debounce) ## **所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。** <script> var btn = document.querySelector('button'); var time; btn.onclick = function () { clearInterval(time); time = setInterval(function () { console.log(Math.random() * 10) }, 2000) } </script> ## 2.节流(throttle) ## **所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。** <button>点击</button> <script> var btn = document.querySelector('button'); var time; var flag=false; btn.onclick = function () { if(flag){ return; } flag = true; (function(){ //定时器执行过flag的状态才会改变。 time = setInterval(function () { console.log(Math.random() * 10); flag = false; }, 2000) })(); } </script> debounce和throttling 各有特点,在不同 的场景要根据需求合理的选择策略。如果事件触发是高频但是有停顿时,可以选择debounce; 在事件连续不断高频触发时,只能选择throttling,因为debounce可能会导致动作只被执行一次,界面出现跳跃。
相关 防抖和节流 前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去... 梦里梦外;/ 2024年04月18日 21:02/ 0 赞/ 21 阅读
相关 防抖和节流 防抖 是为了防止频繁触发的操作,在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时(只能识别一次) function debounce( 约定不等于承诺〃/ 2023年01月08日 02:06/ 0 赞/ 95 阅读
相关 防抖节流 防抖(debounce) 从滚动条监听的例子说起 先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们 叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 144 阅读
相关 防抖和节流 防抖(debounce):当持续触发事件时,保证只执行最后一次事件处理函数 > 在给DOM绑定事件时,有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemo àì夳堔傛蜴生んèń/ 2022年11月05日 08:32/ 0 赞/ 149 阅读
相关 防抖和节流 防抖 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 触发高频事件后n秒内函数只会执行一次,如果n秒 待我称王封你为后i/ 2022年08月30日 11:37/ 0 赞/ 159 阅读
相关 防抖和节流 1. 防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 \ 思路:每次触发事件时都取消之前的延时调用方法 function 朱雀/ 2022年03月18日 01:44/ 0 赞/ 239 阅读
相关 节流、防抖 节流和防抖主要处理事件处理函数高频调用,减少浏览器负担 节流:尽量减少触发次数,mint-ui上封装了一个方法 <script> var t 向右看齐/ 2022年01月30日 00:39/ 0 赞/ 259 阅读
相关 防抖和节流 防抖和节流 一、什么是防抖 二、防抖使用场景 1.输入框是按键触发请求时 三、什么是节流 四、节流的使用场景 1.鼠标连续 快来打我*/ 2021年09月07日 06:13/ 0 赞/ 408 阅读
相关 防抖节流 通过闭包返回的函数来进行操作,使得变量一直存在 防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado 不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 385 阅读
相关 防抖节流 vue代码 防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){ 妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 401 阅读
还没有评论,来说两句吧...