React 实现input输入框的防抖和节流
1.为什么使用防抖和节流
对于频繁触发的事件 比如keydown keyup事件 当频繁点击时候 会多次触发事件 页面出现卡顿 影响性能
2.函数防抖(debounce):间隔时间内只执行一次 函数节流(throttle):间隔时间内执行
3.使用场景
函数防抖:搜索框等
函数节流:鼠标不断点击事件等
4.目的
提升性能 提高用户体验
5.用react实现防抖和节流
import React, { Component } from "react";
class UnDebounce extends Component {
constructor(props) {
super(props);
this.state = {
timerId: null, //整数 定时器的编号 用来取消这个定时器
}
} //模仿ajax请求
ajax = (content) => {
console.log('ajax:' + content)
} debounce = (fn, delay = 3000) => {
//期间间隔执行 节流
return (...rest) => { //箭头函数是没有arguments的 所以用...rest 来代替
let args = rest;
if (this.state.timerId) clearTimeout(this.state.timerId);//要用this.timerId 而不能直接定义var timerId=null;
this.state.timerId = setTimeout(() => {
fn.apply(this, args)
}, delay)
} } throttle = (fn, delay = 3000) => {//
//期间间隔执行 节流
let canRun = true;
return (...rest) => {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, rest);
canRun = true;
}, delay) }
} onUndebounceKeyUpClick = (e) => {//只要是按下键盘就会发生ajax请求 会出现资源浪费 一般情况下当输入完整字符才会请求数据
this.ajax(e.target.value)
} onDebounceKeyUpClick = (e) => {//加入防抖动后 在频繁输入后 不会发送请求
let debounceAjax = this.debounce(this.ajax, 3000)
debounceAjax(e.target.value)
} onThrottleKeyUpClick = (e) => { //ajax会按照我们设定的时间,每1s执行一次
let throttleAjax = this.throttle(this.ajax, 3000);
throttleAjax(e.target.value)
}
render() {
return (
<div>
正常input:<input onKeyUp={this.onUndebounceKeyUpClick} />
防抖动的input:<input onKeyUp={this.onDebounceKeyUpClick} />
节流的input:<input onKeyUp={this.onThrottleKeyUpClick} />
</div>
);
}
} export default UnDebounce;
6.使用lodash实现防抖和节流
import _ from 'lodash';
实现防抖 :onClick = { _.debounce(this.ajax, 200)}
实现节流 :onClick = { _.throttle(this.ajax, 200)}
React 实现input输入框的防抖和节流的更多相关文章
- 【react】input输入框可输入的最好实现方式
使用的是refs.react中输入框不能直接定义value.输入框是可变的,react会提示报错.需要使用的inChange事件(输入框内容被改变时触发). 要定义输入框初始值,需要在componen ...
- 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...
- 详谈js防抖和节流
本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...
- 彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- react中input自动聚焦问题
input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...
- JS的防抖与节流
JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...
随机推荐
- Python-Django学习笔记(三)-Model模型的编写以及Oracle数据库的配置
Django使用的 MTV 设计模式(Models.Templates.Views) 因此本节将围绕这三部分并按照这个顺序来创建第一个页面 模型层models.py 模型是数据唯一而且准确的信息来源. ...
- MVC理解(全程白话不拽词)
我所发的所有博客只为了给想干程序员,但是基础没有或者很差,刚入职场的人 所有的观点不一定准确,我不懂的或者不理解的都会备注出来 先说MVC MVC理解为:M = Model = 数据库表里面每 ...
- LED Keychain-Ideal For Mass Promotions
Looking for something memorable to remind people of your business or nonprofit? Consider custom LED ...
- ASP.NET Razor 常用示例
1.在网页中显示@符号 使用@@即可使编译器不切换到c#,这样在网页中会显示一个@符号. 2.隐式表达式 也就是正常的razor语法,不能包含空格.(除了await 如:<p>@await ...
- [CQOI2007] 余数求和 - 整除分块
\(\sum_{i=1}^n\;k\;mod\;i\) Solution \(\sum_{i=1}^n\;k\;mod\;i\\=\sum_{i=1}^n(k-i\lfloor{\frac{k}{i} ...
- 在线教育厮杀惨烈,51Talk一家独大之后,却仍是持续亏损?
编辑 | 于斌 出品 | 于见(mpyujian) 来自51Talk在线少儿英语专业的学生陈和涛已经成为最近<快乐营大本营>的一个亮点.该学生应邀以流利的英语在台上作自我介绍,并与51Ta ...
- 0120 springboot集成Mybatis和代码生成器
在日常开发中,数据持久技术使用的架子使用频率最高的有3个,即spring-jdbc , spring-jpa, spring-mybatis.详情可以看我之前的一篇文章spring操作数据库的3个架子 ...
- 关于setTimeout的妙用
定义 在指定的延迟时间之后调用一个函数或执行一个代码片段 这个是setTimeout最主要的功能,但也是很坑的地方,首先javascript其实是运行在单线程的环境下,意味者定时器会在未来的某个时间支 ...
- mybatis-plus - buildSqlSessionFactory()
一. buildSqlSessionFactory() mybatis-plus 同样的是调用 factory.getObject() 方法来进行 SqlSessionFactory 创建的. 然后 ...
- [一本通学习笔记] 字典树与 0-1 Trie
字典树中根到每个结点对应原串集合的一个前缀,这个前缀由路径上所有转移边对应的字母构成.我们可以对每个结点维护一些需要的信息,这样即可以去做很多事情. #10049. 「一本通 2.3 例 1」Phon ...