js的节流、防抖以及使用场景
介绍
首先看一个没有经过任何处理的:
1 // 模拟一个输出的函数
2 function input(value) {
3 console.log(`输入的内容${value}`)
4 }
5 const ipt = document.getElementById('input')
6
7 ipt.addEventListener("keyup",function(e){
8 input(e.target.value)
9 })
效果如下:
可以发现,只要按下键盘就会触发函数调用,这样在某些情况下会造成资源的浪费,在这些情况下,可能只需要在输入完成后做请求,比如身份验证等。
防抖处理
首先看下效果:
由此可以看出来,当我们重新频繁的输入后,并不会立即调用方法,只有在经过指定的间隔内没有输入的情况下才会调用函数方法;
代码如下:
1 function input(value) {
2 console.log(`输入的内容${value}`)
3 }
4 const ipt = document.getElementById('input')
5
6 function debounce(fun,delay){
7 let timer ;
8 return function(args){
9 const that = this
10 clearTimeout(timer)
11 timer = setTimeout(function(){
12 fun.call(that,args)
13 },delay)
14 }
15 }
16 const debounceInput = debounce(input,500)
17 ipt.addEventListener("keyup",function(e){
18 debounceInput(e.target.value)
19 })
节流处理
节流就是在规定的时间间隔呢,重复触发函数,只有一次是成功调用
先看下效果:
可以看到在一直输入的情况下每隔一段时间会触发一次函数
代码如下:
1 function input(value) {
2 console.log(`输入的内容${value}`)
3 }
4 const ipt = document.getElementById('input')
5
6 function throttle(fun,delay){
7 let last,timer;
8 return function(args){
9 const that = this
10 const now = +new Date()
11 if(last && now < last + delay){
12 clearTimeout(timer)
13 timer = setTimeout(function(){
14 fun.call(that,args)
15 },delay)
16 }else{
17 last = now
18 fun.call(that,args)
19 }
20 }
21 }
22 const throttleInput = throttle(input,1000)
23 ipt.addEventListener("keyup",function(e){
24 throttleInput(e.target.value)
25 })
方法总结
- 防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。
- 防抖就是在出发后的一段时间内执行一次,例如:在进行搜索的时候,当用户停止输入后调用方法,节约请求资源
- 节流就是在频繁触发某个事件的情况下,每隔一段时间请求一次,类似打游戏的时候长按某个按键,动作是有规律的在间隔时间触发一次
js的节流、防抖以及使用场景的更多相关文章
- js节流防抖应用场景,以及在vue中节流防抖的具体实现
故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...
- JS函数节流和防抖
看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- js函数节流和函数防抖
概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的 ...
- js 函数的防抖(debounce)与节流(throttle)
原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...
- js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- 7分钟理解JS的节流、防抖及使用场景
前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖.糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习.here we go! 概念和例子 函数防抖(debounce) ...
- JS的节流、防抖及使用场景
前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖. 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习.here we go! 概念和例子 函数防抖(debounce ...
随机推荐
- Android Hook框架adbi的分析(1)---注入工具hijack
本文博客地址:http://blog.csdn.net/qq1084283172/article/details/74055505 一.Android Hook框架adbi的基本介绍 adbi是And ...
- SQL注入注释符(#、-- 、/**/)使用条件及其他注释方式的探索
以MySQL为例,首先我们知道mysql注释符有#.-- (后面有空格)./**/三种,在SQL注入中经常用到,但是不一定都适用.笔者在sqlilabs通关过程中就遇到不同场景用的注释符不同,这让我很 ...
- Spring Security 入门篇
本文是一个笔记系列,目标是完成一个基于角色的权限访问控制系统(RBAC),有基本的用户.角色.权限管理,重点在Spring Security的各种配置.万丈高楼平地起,接下来,一步一步,由浅入深,希望 ...
- MySQL中几种常见的日志
前言: 在 MySQL 系统中,有着诸多不同类型的日志.各种日志都有着自己的用途,通过分析日志,我们可以优化数据库性能,排除故障,甚至能够还原数据.这些不同类型的日志有助于我们更清晰的了解数据库,在日 ...
- 『居善地』接口测试 — 6、Httpbin服务介绍
目录 1.Httpbin服务介绍 2.在Windows系统中部署Httpbin服务 3.在Linux系统中部署Httpbin服务 4.Httpbin访问方式 5.Httpbin常用调试接口 6.总结: ...
- 笔记·RCNN系相关
这篇博客总述了从RCNN到Mask RCNN的发展过程 https://blog.csdn.net/heavenpeien/article/details/80534963 简单的说,Fast RCN ...
- CSS变量和浏览器前缀
一.CSS变量 CSS变量是CSS的新特性,大多数浏览器都实现了这个功能,使用CSS变量有利代码复用,而且当我们修改变量值时,所有引用该变量的属性都会发生改变. 定义变量后可以有两种使用方法,第一种时 ...
- [转载]XStar's Libvirt+KVM部署记录 目录
XStar's Libvirt+KVM部署记录 目录 Create: 2013-12-11 Update: 2014-01-03 准备工作 KVM网站 http://sourceforge.net/p ...
- https://www.jqhtml.com/30047.html strace + 命令: 这条命令十分强大,可以定位你程序到底是哪个地方出了问题
https://www.jqhtml.com/30047.html 我的Linux手册 服务器 浏览数:72 2019-1-30 原文链接 基础安装 # CentOS sudo yum install ...
- 《我常用的股票投资工具与网站》v2.0
<我常用的股票投资工具与网站>v2.0 王大海 职业投资,抽空做一点分享. 661 人赞同了该文章 "少年你好,想不到你竟有如此因缘际会看到这里.我看你骨骼精奇,定是万中无一的交 ...