节流防抖学习与实践

Posted 2022-11-20 gitbylegend

先看看概念

函数防抖(debounce)：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。像是两个人的对话，A在不停的balabala（持续触发），如果他说话的时候有停顿（一定间隔），但是停顿的时间不够长，就认为A没有说完， 当停顿时间超过一某个范围就认为A说完了，然后B开始回答（响应）。

函数节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有第一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。感觉像是去排队过安检，当人很多的时候（持续地要进门），安保会隔一段时间放进去几个进行安检（一定时间的间隔）。

场景

前提其实都是某个行为持续地触发，不同之处只要判断是要 优化到减少它的执行次数(throttle) 还是 只执行一次(debounce) 就行。

 

实现(Vue mixin用法)

//防抖
let _d_timer = null;
Vue.prototype.$debounce = (cb, delay) => 
    let that = this;
    if (!delay) 
        delay = 1000;
    
    if (_d_timer) 
        clearTimeout(_d_timer);
    
    _d_timer = setTimeout(function() 
        cb();
        _d_timer = null;
    , delay)



//节流
let throttle_canRun=true;
Vue.prototype.$throttle=(cb,delay)=>
    if(!throttle_canRun)    return;
    if(!delay)    delay=500;
    throttle_canRun=false;
    setTimeout(function()
        throttle_canRun=true;
        cb();
    ,delay)

页面应用

onInput() 
    this.$debounce(()=>
        uni.request(
            url: "https://vipshop.herokuapp.com/api/v1/product/",
            data: 
                name: this.txt
            ,
            success:(res)=> 
                console.log(res)
            
        )
    );
,
throttleHandle()
    this.$throttle(function()
        console.log(111)
    )