阅读 3675

优雅实现防抖与节流函数



防抖&节流

定义

防抖:

防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。

节流:

节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次触发。

使用场景

  • 搜索框
  • 按钮
  • 监听滚动
  • 频繁使用鼠标
  • ...

总的来说:任何东西被频繁的调用都有可能需要防抖或者节流去优化

实现方式

防抖

	function showLog() {
        console.log('show');
    }

    /*
    * 防抖 思路:
    * 先开启一个定时任务执行,定时任务完成后则清空;当再调用时,如果定时任务仍存在则清空原来任务,创建新的定时任务
    * */
    function debounce(fn, space) {
        let task = null;
        return function (){
            if(task) {
                clearTimeout(task);
            }
            task = setTimeout(fn.apply(this, arguments), space);
        }
    }
    // 使用
    let debounceShowLog = debounce(showLog, 3000);
    debounceShowLog()
复制代码

节流

 /*
    * 节流 思路:
    * 先开启一个定时任务执行,定时任务完成后则清空,当再调用时,如果定时任务仍存在则不执行任何操作
    * */
    function throttle(fn, space) {
        let task = null;
        return function () {
            if(!task) {
                task = setTimeout(function () {
                    task = null;
                    fn.apply(this, arguments);
                }, space);
            }
        }
    }

    let throttleShowLog = throttle(showLog, 3000);
复制代码

简单才是真爱

文章分类
前端
文章标签