阅读 113

在短视频开发中,要想实现延迟搜索功能需要怎么做?

在短视频开发中,要想实现延迟搜索功能需要怎么做?

一般在短视频开发过程中,经常会遇到搜索请求后台的情况,此时搜索延迟就显得尤为重要,如果没有搜索延迟功能,那么用户页面将会显得特别卡顿,所以为了优化用户的体验,在短视频开发时,就要实现延迟搜索功能,那我们需要怎么做呢?

以下是实现代码:

import {Component} from 'react'class Search extends Component{  constructor(props){    this.state({delay:0});    this.onSearch = this.onSearch.bind(this);
  }  onSearch(){    this.setState({delay:this.state.delay + 1})    let _this = this ;    setTimeout(function(){
      _this.setState({delay:_this.state.delay - 1});      if(this.state.delay == 0){            //执行后台请求的代码
            console.log('请求执行了')
          }
      }
    },1000)
}  render(){    return (        <div>
              <input onChange={this.onSearch}/>
      </div>
    )
  }
}export default Search

以上就是在短视频开发时的一个最简单的搜索延迟功能的实现代码,希望在大家进行短视频开发时能给予一定的帮助。有误之处还请指出。
本文转载自网络,转载仅为分享干货知识,如有侵权欢迎联系云豹科技进行删除处理
原文链接:https://segmentfault.com/a/1190000010389509


文章分类
后端
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐