前言
在开发中,我们经常会遇到需要频繁触发某个函数的情况,比如:
监听滚动条的变化,当滚动条的位置发生变化时,需要执行某个函数
监听鼠标的移动,当鼠标的位置发生变化时,需要执行某个函数
监听键盘的按键...,浏览器奔溃,页面空白等情况
而解决这一问题的,正是函数节流与函数防抖
函数节流
定义: 节约(减少)触发事件处理函数的频率,连续每隔一定的时间触发执行的函数,它是优化高频率执行一段js代码的一种手段...特点: 不管事件触发有多频繁,都会保证在规定的间隔时间内真正的执行一次事件处理函数,只会让一个函数在某个时间窗口内执行一次,若在时间窗口内再次触发,则重新计算时间
应用场景: 常用于鼠标连续多次点击click...,必然会造成多次数据的请求,服务器的压力,这样代码的性能是非常低效的,影响性能,降低这种频繁操作的一个重要的手段,就是降低频率,通过节流控制,也就是让核心功能代码在一定的时间,隔多长时间内执行一次
节流就是保证一段时间内只执行一次核心代码...例如:表单多次提交,推荐使用防抖
换句话说,也就是当连续触发事件时并没有执行事件处理函数,只有在某一阶段连续触发的最后一次才执行,它遵循两个条件
必须要等待一段时间
上一次触发的时间间隔要大于设定值才执行