js函数的防抖与节流

序言

    我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove,  onscroll等等,有些时候,我们并不能或者不想频繁触发事件,咋办呢?这时候就应该用到函数防抖和函数节流了

函数防抖

 短时间内多次触发同一事件,只执行最后一次,或者只执行最开始的一次,中间的不执行

非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间

立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果

函数节流

指连续触发事件但是在 n 秒中只执行一次函数,即 2n 秒内执行 2 次...,节流如字面意思,会稀释函数的执行频率,同样有两个版本,时间戳和定时器版

在持续触发事件的过程中,函数会立即执行,并且每 1s 执行一次

可以看到,在持续触发事件的过程中,函数不会立即执行,并且每 1s 执行一次,在停止触发事件后,函数还会再执行一次,我们应该可以很容易的发现,其实时间戳版和定时器版的节流函数的区别就是,时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候

下面是一个节流函数的完整版

你可能感兴趣的:(js函数的防抖与节流)