什么是loadsh

什么是loadsh这个概念真不知道?但是如果你说防抖和节流那是必须知道,用别的名字我反而不知是何东东。

js call、apply、bind_如花菇凉的博客-CSDN博客

========================还是来总结一下吧====================================

作用

防抖和节流都是用来防止高频率的js代码的执行

防抖:以最后一个停止后超过多长时间触发

// 防抖
export function _debounce(fn, wait) {
  const delay = wait || 200
  var timer
  return function() {
    const th = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(th, args)
    }, delay)
  }
}

节流:规定时间内达到即触发

/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export function _throttle(fn, time) { 
  let last
  let timer
  const interval = time || 200
  return function() {
    const th = this
    const args = arguments
    const now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(function() {
        last = now
        fn.apply(th, args)
      }, interval)
    } else {
      last = now
      fn.apply(th, args)
    }
  }

对于运行时高频操作的浏览器性能是个优化提升的策略。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对你的问题,我来简单介绍一下 React 类组件中如何使用 loadash 的防抖函数。 Loadash 防抖函数的作用是在一定时间内,只执行最后一次操作,并且可以控制时间间隔。在 React 中,可以通过在类组件中定义一个 debounce 函数来实现防抖功能。具体步骤如下: 1. 安装 Loadash 库 可以通过 npm 或 yarn 安装 Loadash 库,命令如下: ``` npm install loadash ``` 或者 ``` yarn add loadash ``` 2. 在类组件中定义 debounce 函数 在类组件中定义一个 debounce 函数,可以将 Loadash 的防抖函数封装在里面。代码如下: ``` import debounce from 'loadash/debounce'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { inputValue: '', }; this.handleInputChange = this.handleInputChange.bind(this); this.debouncedHandleInputChange = debounce(this.handleInputChange, 500); } handleInputChange(event) { this.setState({ inputValue: event.target.value, }); } render() { return ( <div> <input type="text" onChange={this.debouncedHandleInputChange} /> </div> ); } } ``` 在上面的代码中,我们定义了 `debouncedHandleInputChange` 函数,它是通过 `debounce` 函数封装 `handleInputChange` 函数得到的。`debounce` 函数的第二个参数表示时间间隔,这里设置为 500ms。 3. 在组件中使用防抖函数 最后,在组件中使用 `debouncedHandleInputChange` 函数来替代原来的 `handleInputChange` 函数,就可以实现防抖效果了。在上面的代码中,我们将 `debouncedHandleInputChange` 函数绑定到 input 元素的 onChange 事件上。 希望以上内容能够对你有所帮助。如果有其他问题,可以继续提问哦!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值