JS系列1---节流,去抖(防抖)应用场景:intput请求优化,页面监听
在项目开发过程中经常遇到在input的change事件中发起请求,将用户最新输入的字符作为data传给后台,但是如果用户的输入频率过高,或者用户输入的字符还未拼成一个完整的字词,这时候发起请求会浪费网络资源,使页面卡顿。
这时候我们就用到了函数去抖(debounce)和函数节流(throttle),首先来看一下概念:
1,函数去抖(又称防抖)
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
未优化前代码demo:
<input id="debounceTest" />
<script>
function ajax(value) {
console.log(value+'-----------发起ajax请求')
} let inputa = document.getElementById('debounceTest') inputa.addEventListener('keyup', function (e) {
ajax(e.target.value)
})
</script>
效果图:
从页面中可以看到,只要触发了keyup时间,页面就会发起请求,不管用户是否输入了一个完整的字符,这样对网络资源十分浪费,在移动端甚至可能造成用户体验不流畅,系统卡顿,所以我们来对代码进行优化,如下:
优化后代码demo:
function ajax(content) {
console.log(content+'---------------ajax请求')
} function debounce(fun, delay) {
return function (args) {
let that = this
let _args = args
clearTimeout(fun.id)
fun.id = setTimeout(function () {
fun.call(that, _args)
}, delay)
}
} let inputb = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputb.addEventListener('keyup', function (e) {
debounceAjax(e.target.value)
})
页面效果:
可以看出,当用户一直在输入时,页面不会发起请求,当用户的上次输入与下次输入有一定时间间隔时,页面才会发起请求。
同样的问题还有另一种解决方法:
2,函数节流(throttle)
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
还是上边的例子,这次用节流的方法实现
节流后的代码demo:
function throttle(fun, delay) {
let last, deferTimer
return function (args) {
let that = this
let _args = arguments
let now = +new Date()
if (last && now < last + delay) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fun.apply(that, _args)
}, delay)
}else {
last = now
fun.apply(that,_args)
}
}
} let throttleAjax = throttle(ajax, 1000) let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function(e) {
throttleAjax(e.target.value)
})
页面效果:
可以看出,不管用户的输入速度是多少,页面总是以恒定的间隔向后台发起请求。
函数节流还可以应用于其他事件,比如mouse移动事件,页面滚动事件,resize事件等能高频次触发的事件中。
函数节流和去抖都是为了解决事件触发频率过高的问题,但是使用了不同的原理
节流是总是以固定的间隔发起请求,对高频率事件做做次数限制。去抖是固定时间段内只发送一次请求。对高频率事件做做次数限制
以上为节流去抖的全部内部,如有错误还望指正。
JS系列1---节流,去抖(防抖)应用场景:intput请求优化,页面监听的更多相关文章
- 【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript"> // 页面监听js报错问题 onerror=hand ...
- JavaScript 高级系列之节流 [throttle] 与防抖 [debounce]
一.概念 这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题:像这类事件一般像 scroll keyup ...
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- angular.js和vue.js中实现函数去抖(debounce)
问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
- JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值
一个简单的Tab选项卡点击事件. <style type="text/css"> ul{padding:0;margin:0;} .tab{width:400px;} ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- 浅析 JavaScript 的函数节流和去抖
现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
随机推荐
- StarWind Storage Appliance
https://www.starwindsoftware.com/starwind-storage-appliance?gclid=CLzH8oGyptICFbIW0wodNuYG1Q
- 【原创】Metro大都会扫码乘地铁技术大揭密
本文观点仅为技术猜解,不代表官方线上真实方案. 风靡上海的扫码乘地铁,从2018年1月20日全面支持,至今近10天了.起初不以为然,过了大概1个礼拜左右,也下载了Metro大都会APP,开始体验扫 ...
- 深入理解Java虚拟机(字节码执行引擎)
深入理解Java虚拟机(字节码执行引擎) 本文首发于微信公众号:BaronTalk 执行引擎是 Java 虚拟机最核心的组成部分之一.「虚拟机」是相对于「物理机」的概念,这两种机器都有代码执行的能力, ...
- C语言实现贪吃蛇
日期:2018.9.11 用时:150min 项目:贪吃蛇(C语言--数组 结构体实现) 开发工具:vs2013 关键知识:数组,结构体,图形库,键位操作 源代码: #include<std ...
- 转载 make版MYsql 5.5.13
使用cmake安装mysql5.5.132014-04-09 12:59:42 分类: Mysql/postgreSQL 原文地址:使用cmake安装mysql5.5.13 作者:isqlw 安装cm ...
- Go - Slice 切片
概述 切片是一种动态数组,比数组操作灵活,长度不是固定的,可以进行追加和删除. len() 和 cap() 返回结果可相同和不同. 声明切片 //demo_7.go package main impo ...
- 找不到 main 方法
前几天打开了好久不用的eclipse,发现报了个奇怪的错误 ***中找不到 main 方法, 请将 main 方法定义为: public static void main(String[] args) ...
- [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exist
这个问题是由于data的目录下没有安装数据库表 解决方法: vi /etc/my.cnf 修改为正确的datadir=“xxxxx”即可 然后service mysqld start service ...
- asyncio系列之sleep()实现
先来看个例子,自己实现的模拟耗时操作 例1 import types import select import time import socket import functools class Fu ...
- mac vim 配色
syntax on set nu set noic set t_Co=256 set tabstop=4 set nocompatible set shiftwidth=4 set softtabst ...