关于Js debounce（防抖）函数和throttle(节流)小结
闭包的实际运用防抖
防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，
如果设定的时间到来之前，又一次触发了事件，就重新开始 延时。
(如果在一段时间内，又触发了该事件；就重新开始 延时)
主要运用
1==>在用户输入,进行搜索时可以使用防抖
2==>射击游戏中的mousedown、keydown事件
3==>搜索，结束后n秒后才进行搜索；n秒内，又输入就重新计时
3==>echarts的resize函数的底层就有防抖
节流：在规定时间内，保证执行一次该函数。
将函数调用赋值给变量；此时函数已经执行了一次哈
你认为test函数有没有被执行
<script>
function test() {
console.log('我是被执行了一次的');
}
let aa = test();
</script>
已经执行了
//将函数调用赋值给变量；此时函数已经执行了一次哈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input">
<script>
function debounce(func, delay) {
console.log(1)
let timer;
return function (args) {
clearInterval(timer);
timer = setTimeout(function () {
// 在delay秒内执行某一个func事件;
func(args)
}, delay)
}
}
function inputFunction(val) {
console.log(`你输出的结束是${val}`);
}
//此时的防抖函数已经被执行过一次了；在赋值的过程中；
const debouceInput = debounce(inputFunction, 500);
const input = document.getElementById("input");
input.addEventListener('keyup', function (e) {
debouceInput(e.target.value)
})
</script>
</body>
</html>
我的第二个防抖函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" >
<input type="submit" id="input" value="按钮">
<script>
const btn = document.getElementById("input");
btn.addEventListener('click', debounce(submit,2000),false)
function submit(){
console.log('点击了')
}
function debounce(func,timer) {
var t=null;
return function(){
var fristTimer=!t;
if(t){
clearTimeout(t)
}
if(fristTimer){
func.apply(this,arguments)
}
t=setTimeout(()=>{
t=null;
},timer)
}
}
</script>
</body>
</html>
这两个防抖函数的说明
第一个防抖函数的缺点是第一次进入该函数。
就会被执行
显然这样是不好的
所以我写了第二个防抖函数。就不会已进入就会被执行了
在vue3中防抖函数的使用
在src下创建utils.js文件
代码如下
export function debounce(func,timer) {
var t=null;
return function(){
var fristTimer=!t;
if(t){
clearTimeout(t)
}
if(fristTimer){
func.apply(this,arguments)
}
t=setTimeout(()=>{
t=null;
},timer)
}
}
在某一个文件中使用
<template>
<div>
<button @click="handerClick">按钮</button>
</div>
</template>
<script>
import { debounce } from "@/utils.js"
export default {
setup () {
const handerClick=debounce(()=>{
// 你需要做的业务逻辑
console.log('防抖在2s内触发');
},2000)
return {
handerClick
}
}
}
</script>
节流：
当持续触发事件的时候，
保证在一段时间内，只调用一次事件处理函数；
点击王者荣耀回城的时候，就需要使用节流哈~
典型就是：
鼠标不断点击触发；规定在n秒内多次点击只有一次生效
节流函数在vue3中的使用
utils.js文件下的内容
// 节流函数的使用
export function throttle(func, delay) {
var begin = 0;
return function () {
var cur = new Date().getTime();
if (cur-begin>delay) {
func.apply(this, arguments)
begin=cur
}
}
}
vue3 需要的页面使用
<template>
<div>
<button @click="handerClick3">节流函数的使用</button>
</div>
</template>
<script>
import { throttle } from "@/utils.js"
export default {
setup () {
const handerClick3=throttle(()=>{
// 你需要做的业务逻辑
console.log('防抖在2s内触发kkkkkkkkk');
},3000)
return {
handerClick3,
}
}
}
</script>
关于Js debounce（防抖）函数和throttle(节流)小结的更多相关文章
- js实现防抖函数和节流函数
防抖函数(debounce) 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行: 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用 ...
- 详解防抖函数（debounce）和节流函数（throttle）
本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...
- Javascript中 节流函数 throttle 与 防抖函数 debounce
问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JS奇淫巧技：防抖函数与节流函数
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
- JS节流和防抖函数
一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() re ...
- js节流与防抖函数封装
js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...
- throttle(节流函数) 与 debounce(防抖动函数)理解与实现
我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件) 如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏 ...
随机推荐
- 华为云GaussDB(for Influx)揭秘第五期：最佳实践之子查询
摘要: GaussDB(for influx)提供灵活的子查询能力,满足海量数据场景下的高性能查询需求. 本文分享自华为云社区<华为云GaussDB(for Influx)揭秘第五期:最佳实践之 ...
- Datahub新版本0.9.1更新，列级别数据血缘功能发布！
大家好,我是独孤风. 近期Datahub进行了一次大的版本更新,从0.9版本以后Datahub也正式发布了列级别数据血缘的功能. 0.9.1版本又增加了,列的影响分析这个功能. 这样Datahub对于 ...
- PPT 呼吸感
任何元素都应该保持一定的距离,留出可以"呼吸"的空间 呼吸感 怎么营造 不要让内容超出/接近边框 类似的元素摆放在一起 控制 行间距/字间距 行间距:1.3.字间距:1.0 :行间 ...
- 成为一个合格程序员所必备的三种常见LeetCode排序算法
排序算法是一种通过特定的算法因式将一组或多组数据按照既定模式进行重新排序的方法.通过排序,我们可以得到一个新的序列,该序列遵循一定的规则并展现出一定的规律.经过排序处理后的数据可以更方便地进行筛选和计 ...
- C# NLog 配置
首先用NuGet安装NLog依赖DLL NLog NLog.Config NLog.Schema NLog配置文件NLog.config: <?xml version="1.0&quo ...
- 前端知识点 | 查看已登录网站 Cookie 信息
方法一:针对 Chrome 浏览器 设置 \(\to\) 隐私设置和安全性 \(\to\) Cookie 及其他网站数据 \(\to\) 查看所有 Cookie 和网站数据 or chrome://s ...
- BZOJ 3450 - Tyvj1952 Easy （期望DP）
描述 某一天 WJMZBMR 在打 osu~~~ 但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则: 有 \(n(n\le 300000)\) 次点击要做,成功了就是 o,失败了就 ...
- 嵌入式Linux必读经典书籍（含下载方式）
最近,在知乎看到一个问题,"嵌入式Linux有哪些好书推荐".我读研期间也喜欢收藏一些书籍,每次看到京东有活动,总是忍不住想买一些书籍回来. 随着时间越来越久,我买的书越来越多,但 ...
- freeswitch的mod_xml_curl模块
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 随着fs服务的增多,每一台fs都需要在后台单独配置,耗时耗力,心力憔悴. 如果有一个集中管理配置的配置中心,统一管理所有fs的配置, ...
- Postman 接口测试配置 Pre-request Script
本文为博主原创,转载请注明出处: Pre-request Script 为Postman预置脚本,用于在postman 发送请求之前执行,封装计算或获取某些请求参数. 1. postman 脚本提供 ...