防抖跟节流

73 阅读1分钟

节流

连续触发事件,但是在n秒中只执行一次函数

使用场景:轮播图点击效果,鼠标移动,滚动条滚动,上拉加载

案例:轮播图完成切换需要1s,不加节流,快速点击,嗖嗖的切换 ;加了节流,不管快速点击多少次,1s内只执行一次

上拉加载时添加节流阀

data中定义isLoading节流阀

请求数据前打开节流阀,请求数据后关闭节流阀

再一次请求数据时,判断节流阀的状态,不再请求 ‘

防抖

多次触发事件,只执行一次

比如说在做搜索功能时,如果不做防抖功能,那么每当我们输入一个字的话就会触发事件,而做了防抖功能,就是在我们输入完毕后触发的事件

实现功能

  • data中定义一个定时器

  • input事件中添加防抖

    • 先清除定时器
    • 重新启动一个定时器,赋值给data中定义的定时器
    • 在定时器内部500毫秒内没有输入事件,就为搜索关键字赋值