华山资源网

简单实现节流函数和防抖函数过程解析
网络编程 2024/11/15 佚名
3 1

在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。今天自己翻阅了一些资料之后，来简单的谈谈我对节流函数和防抖函数的理解，希望能帮助大家理解；

节流函数

顾名思义，就是节省流量节省内存性能的一种函数，可以理解为是一种性能优化方案；

举个例子：一个水龙头一直在滴水，可能一次性会滴很多水，但是我们想控制它的频率 ，让它每1000毫秒滴一滴水，这个时候我们就可以用到节流函数来进行控制（简单可以理解为类似于周期性定时器）

js代码（可直接复制到编辑器上看效果）：

//首先定义一个全局变量
var canRun = true;
//当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
window.onresize = function(){
// 取反，canRun为false的情况下
if(!canRun){
//直接return，后面的代码不执行
 return
}
//走到这来就是canRun为true的情况，然后进行赋值为false
canRun = false

//设置一个定时器进行轮询操作
setTimeout( function () {
//这是要做的事情
  console.log("函数节流")
//最后记得重新赋值true继续让他取反
  canRun = true
//每隔1000毫秒也就是1秒钟就执行一次

 }, 1000)
}

效果图如下：

简单实现节流函数和防抖函数过程解析

防抖函数

防抖函数和节流函数很类似，但是稍有区别，防抖函数的定义是当事件触发完成之后再延迟触发，并且只触发一次；如果在触发完成之前再次触发，则会再次刷新延迟；简单理解为（如果事件不触发即不执行，并且只会执行一次，就是定时器最后走的那一次）

举个例子：假如有个弹簧，你一直往下按压只要你不松手就是不会弹出的，弹簧只有在你松手的那一瞬间才会弹出去；防抖函数也是如此，只要事情触发没有结束是不会执行的，只有在事件触发结束后延迟执行一次；

js代码（可直接复制到编辑器上看效果）：

//定义方法即要做的事情
function fun(){
 console.log('onresize')
 
}
//定义事件触发要执行的方法，两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn,delay){
　　//定义一个变量作为等会清除对象
    var handle;
　　//这里用到了闭包，一个函数里面return另一个函数，变量相互签引导致垃圾回收机制不会销毁handle变量
    return function(){
　　　　　　//在这里一定要清除前面的定时器，然后创建一个新的定时器
      clearTimeout(handle) 
　　　　　　//最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发（这里的变量赋值是跟定时器建立连接，进行地址赋值，一定要重新赋值给handle 
     handle=setTimeout(function(){
       fn()
     },delay)
    }
    
   }
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));

效果图如下：

简单实现节流函数和防抖函数过程解析

总结：

1.防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案；

2.防抖函数只会执行一次，且是最后触发的那一次，而节流函数会规律性的执行多次；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com