Android&RN&Flutter实战——防抖节流函数

9 篇文章 0 订阅
1 篇文章 0 订阅

1.背景介绍

防抖

函数防抖,这里的抖动就是执行的意思,而一般的抖动都是持续的,多次的。假设函数持续多次执行,我们希望让它冷静下来再执行。也就是当持续触发事件的时候,函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行。

节流

节流的意思是让函数有节制地执行,而不是毫无节制的触发一次就执行一次。什么叫有节制呢?就是在一段时间内,只执行一次。


2.经典举例

  1. 防抖函数:搜索页面,用户连续输入,等停下来再去触发搜索接口
  2. 节流函数:防止按钮连点

3.Android实现

  1. 代码实现:
object FunctionUtil {
    private const val DEFAULT_DURATION_TIME = 300L
    var timer: Timer? = null


    /**
     * 防抖函数
     */
    fun debounce(duration: Long = DEFAULT_DURATION_TIME, doThing: () -> Unit) {
        timer?.cancel()
        timer = Timer().apply {
            schedule(timerTask {
                doThing.invoke()
                timer = null
            }, duration)
        }
    }

    /**
     * 节流函数
     */
    var lastTimeMill = 0L
    fun throttle(duration: Long = DEFAULT_DURATION_TIME, continueCall: (() -> Unit)? = null, doThing: () -> Unit) {
        val currentTime = System.currentTimeMillis()
        if (currentTime - lastTimeMill > duration) {
            doThing.invoke()
            lastTimeMill = System.currentTimeMillis()
        } else {
            continueCall?.invoke()
        }
    }
}
  1. 使用:
btn_sure.setOnClickListener {
    FunctionUtil.throttle {
        Log.i("nell-click", "hahah")
    }
}

btn_sure.setOnClickListener {
    FunctionUtil.throttle(500L) {
        Log.i("nell-click", "hahah")
    }
}

FunctionUtil.debounce {
	searchApi(text)
}

4.RN实现

  1. 代码实现:
/**
 * 防抖函数
 */
function debounce(func, delay) {
  let timeout
  return function() {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

/**
 * 节流函数
 */
function throttle(func, delay) {
    let run = true
    return function () {
      if (!run) {
        return
      }
      run = false // 持续触发的话,run一直是false,就会停在上边的判断那里
      setTimeout(() => {
        func.apply(this, arguments)
        run = true // 定时器到时间之后,会把开关打开,我们的函数就会被执行
      }, delay)
    }
}

  1. 使用:
throttle(function (e) {
  console.log("nell-click")
}, 1000)


debounce(function (e) {
    searchApi(text)
}, 300)

5.Flutter实现

  1. 代码实现:
class CommonUtil {
  static const deFaultDurationTime = 300;
  static Timer timer;

  // 防抖函数
  static debounce(Function doSomething, {durationTime = deFaultDurationTime}) {
    timer?.cancel();
    timer = new Timer(Duration(milliseconds: durationTime), () {
      doSomething?.call();
      timer = null;
    });
  }

  // 节流函数
  static const String deFaultThrottleId = 'DeFaultThrottleId';
  static Map<String, int> startTimeMap = {deFaultThrottleId: 0};
  static throttle(Function doSomething, {String throttleId = deFaultThrottleId, durationTime = deFaultDurationTime, Function continueClick}) {
    int currentTime = DateTime.now().millisecondsSinceEpoch;
    if (currentTime - (startTimeMap[throttleId] ?? 0) > durationTime) {
      doSomething?.call();
      startTimeMap[throttleId] = DateTime.now().millisecondsSinceEpoch;
    } else {
      continueClick?.call();
    }
  }
  
}
  1. 使用:
GestureDetector(
      onTap: () => CommonUtil.throttle(onTap, durationTime: durationTime)
)


CommonUtil.debounce(searchApi)

完结,撒花🎉

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值