函数节流和防抖

一、函数节流

  1)定义:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次

  2)原理:用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,这样循环下去

       image.pngimage.png

二、函数防抖

    1)定义:一个需要频繁触发的函数,在规定时间内,只让最后一次执行,前面的不执行

    2)原理:第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行

          image.pngimage.png

三、应用

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发,比如说DOM事件的监听回调,input的keyup、keydown,window.scroll,window.resize事件,按钮连续变态点击导致无限制发送接口请求等应用场景


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章