React 涉及e.target时候,使用debounce节流函数

更新日期: 2019-07-22阅读: 2.4k标签: 节流

举例场景: 

在一个input搜索框中输入文本,如果2s内可能会有很多次input的onChange事件,每次都触发一个api请求,明显不合理,所以此时需要debounce节流函数,2s之内的所有输入只会请求一次API,做到交互层面的优化。

为了缩小关注点,示例直接使用loadsh的debounce函数。也直接使用了类的示例属性方法(可用过babel支持,因为实在不喜欢写过多的bind)


==直接上正确代码:==

import react from 'react'
import {debounce} from 'lodash'

export default class InputDebounce extends React.Component {
  constructor() {
    super()
    this.doSearchAjax = debounce(this.doSearchAjax, 2000)
  }

  handleInputSearch = e => {
    this.doSearchAjax(e.target.value)
  }

  doSearchAjax = value => {
    console.log('执行AJAX搜索', value)
  }

  render() {
    return (
      <div>
        <h4>e.target 结合 debounce 使用</h4>
        <input type="text" onChange={this.handleInputSearch} />
      </div>
    )
  }
}


再来看常见的错误代码示例

一、直接使用debounce函数包裹事件函数

报错: Uncaught TypeError: Cannot read property 'value' of null

原因分析: 涉及到React中的合成事件,详见React合成事件,debounce包装后的回调函数,是个异步事件,即e.target为null了

解决方案: 使用e.persist()实现对事件的引用保留

import React from 'react'
import {debounce} from 'lodash'

export default class InputDebounce extends React.Component {
  handleInputSearch = e => {
    this.doSearchAjax(e.target.value)
  }

  doSearchAjax = value => {
    console.log('执行AJAX搜索')
  }

  render() {
    return (
      <div>
        <h4>e.target 结合 debounce 使用</h4>
        <input type="text" onChange={debounce(this.handleInputSearch, 2000)} />
      </div>
    )
  }
}


二、使用了e.persist(),但是 debounce 包含的函数并不会执行

import React from 'react'
import {debounce} from 'lodash'

export default class InputDebounce extends React.Component {
  handleInputSearch = e => {
    // 对原有事件进行保留
    e.persist()
    debounce(() => {
      // 函数并不会执行
      this.doSearchAjax(e.target.value)
    }, 2000)
  }

  doSearchAjax = value => {
    console.log('执行AJAX搜索')
  }

  render() {
    return (
      <div>
        <h4>e.target 结合 debounce 使用</h4>
        <input type="text" onChange={this.handleInputSearch} />
      </div>
    )
  }
}

这时候,需要将异步执行的函数抽离出来,即开头的正确代码。正确代码里面并未使用e.persist(),因为没有必要,onChange函数并非是被debounce函数包装的。


链接: https://www.fly63.com/article/detial/4878

前端防抖和节流

窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕

防抖与节流常见的几种实现方式

在限制的时间内持续触发事件的时候,函数是完全不执行的,非立即执行版,等最后一次触发结束的一段时间之后,再去执行,节流的意思是让函数有节制地执行

vue全局防抖和节流

一种是立即执行:频繁触发事件,第一次触发时执行函数,后面触发不会执行,停止触发,间隔一定时间之后再触发事件,函数才会再次执行

函数防抖和节流

函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。

JS 节流函数(throttle)与防抖函数(debounce)

节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。1s内执行第一次,防抖:在一定时间内连续触发某事件,在这段时间内只执行最后一次触发的那一次。最后一次延时1s后执行

节流与防抖

概念:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。类似于技能CD。应用:点击按钮,轮播图点击左右箭头。

利用Css实现按钮节流

节流是指避免过于频繁地执行某个功能,例如保存按钮。 为了避免重复提交或者服务器的考虑,往往需要限制点击行为,否则接口会被频繁请求。 之前基本都是通过js控制节流问题

Vue 2 中的实现 CustomRef 方式防抖/节流

今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式。在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!