函数节流与函数防抖
时间:2022-07-23
本文章向大家介绍函数节流与函数防抖,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
节流与防抖的概念
函数节流与函数防抖的目的都是为了减少用户对服务器不必要的请求次数,以此提高服务器性能的函数。节流是在一段时间内,只向服务器请求一次。防抖则是在频繁触发相同请求时,若任务之间间隔小于指定时间,那么只会执行最后一次请求。
防抖
思路:每次触发事件时都取消之前的延时调用方法
先看下面一段代码
<input type="text" id="text">
<script>
//模拟ajax请求
const ajax = (content) => {
console.log(content)
}
document.querySelector('#text').addEventListener('input',(e)=>{
ajax(e.target.value)
})
</script>
上面的代码是未做防抖的思路,监听input元素的input
事件,随后得到值以后,模拟触发像后端请求接口,这样做能得到我们想要的数据。但是这样做非常消耗服务器的性能,例如我们在搜索商品时,获取用户输入的值以后,展示给用户一些提示商品的列表。加入用户想搜索nike
这个关键词,下面是模拟请求的结果,这里有看到请求依次请求了n,ni,nik,nike
,我们这里其实只需要请求一次nike
就可以了。这还只是算的1个用户,通过防抖我们将4次请求优化至1此请求。如果同时访问的是1万人,那么4万次请求和1万次请求差距就相当大了。
根据上诉的问题,我们优化一下代码。
1. 添加debounce函数
我们先添加一个debounce
函数,调试一下看看函数能否正常调用,发现是可以正常调用的。
<input type="text" id="text">
<script>
//模拟ajax请求
const ajax = (content) => {
console.log(content)
}
const debounce = (fn) => {
return () => {
fn()
}
}
document.querySelector('#text').addEventListener('input',(e)=>{
debounce(ajax)(e.target.value)
})
</script>
2. 回顾概念
防抖的概念则是在任务之间间隔小于指定时间时,只会触发一次请求,那么这里的debounce函数还需要一个delay
时间参数,涉及到时间,则需要一个添加一个定时器,接下来再次修改函数。
<input type="text" id="text">
<script>
//模拟ajax请求
const ajax = (content) => {
console.log(content)
}
const debounce = (fn,delay) => {
return (args) => {
clearTimeout(fn.id)
fn.id = setTimeout(function () {
fn(args)
}, delay)
}
}
document.querySelector('#text').addEventListener('input',(e)=>{
debounce(ajax,500)(e.target.value)
})
</script>
我们再把调用debounce函数写的更优雅一些
<input type="text" id="text">
<script>
//模拟ajax请求
const ajax = (content) => {
console.log(content)
}
const debounce = (fn,delay) => {
return (args) => {
clearTimeout(fn.id)
fn.id = setTimeout(() => {
fn(args)
}, delay)
}
}
const oDebounce = debounce(ajax,500)
document.querySelector('#text').addEventListener('input',(e)=>{
oDebounce(e.target.value)
})
</script>
好了一个防抖函数就完成了。
节流
思路:每次触发事件时都判断当前是否有等待执行的延时函数
和防抖一样,节流也是为了降低服务器的性能。不过节流时在一段时间内只执行一次函数。简单做一点修改,下面则是一个节流函数。
<script>
//模拟ajax请求
const ajax = (content) => {
console.log(content)
}
const throttle = (fn,delay) => {
let timer = true
return (args) => {
if(!timer) return
timer = false
clearTimeout(fn.id)
fn.id = setTimeout(() => {
fn(args)
timer = true
}, delay)
}
}
const oThrottle = throttle(ajax,500)
document.querySelector('#text').addEventListener('input',(e)=>{
oThrottle(e.target.value)
})
</script>
- 马尔可夫链文本生成的简单应用:不足20行的Python代码生成鸡汤文
- 最长递增子序列
- dedecms批量删除文档关键词可以吗
- 【学术】在C ++中使用TensorFlow训练深度神经网络
- 一个canonical标签解决site不在首页的问题
- 由一道面试题来了解进程间的通信
- 【教程】简单教程:用Python解决简单的水果分类问题
- 通过html<map>标签给图片加链接
- Windows下安装Scikit-Learn
- 解决后台无法进入提示DedeCMS Error: (PHP 5.3 and above) Please set 'request_order' ini value
- 一文教你实现skip-gram模型,训练并可视化词向量
- 如何将文章列表用<li>分两列显示
- 面试题之走楼梯问题
- 最长公共子序列与最长公共子串
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TensorFlow保存TensorBoard图像操作
- 浅谈PHP SHA1withRSA加密生成签名及验签
- PHP PDO数据库操作预处理与注意事项
- laravel 框架配置404等异常页面
- Django –Xadmin 判断登录者身份实例
- Laravel 队列使用的实现
- keras 两种训练模型方式详解fit和fit_generator(节省内存)
- Keras 中Leaky ReLU等高级激活函数的用法
- Python错误的处理方法
- python3的pip路径在哪
- MySQL 案例:init_connect 引发的 Lost connection
- PHP一个简单的无需刷新爬虫
- PHP实现函数内修改外部变量值的方法示例
- PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
- PHP命名空间简单用法示例