1.何为防抖与节流函数呢?

1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次

举例:当用户在进行表单提交时,用户提交一次就向服务器发送一次请求,当用户频繁地点击提交,则很自然地就向服务器多次请求,则会对服务器压力很大,那我们就需要想办法解决这种问题

2.节流(throuttle):当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次
举例:当我们打游戏的时候长按某个按键,动作是有规律的在间隔时间触发一次

#1.先来看一个没有经过任何处理的demo

由上图可以知道当我们每点击一次控制台就输出一次,这实际上在现实项目中是很浪费资源的

2.来看一下经过防抖函数包装之后的代码

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<input type="text" name="" id="">
<input type="submit" value="提交" id="input">
<script>
const input = document.querySelector('#input');
// input.addEventListener('click', sumbit);
input.addEventListener('click', debounce(sumbit, 2000)); function sumbit(e) {
console.log('点击');
// console.log(this);
// console.log(e); };
//第一次点击立即执行,第二次之后就启用防抖函数
function debounce(func, delay) {
let timer = null;
return function(...args) {
let firtClick = !timer;
if (timer) {
clearTimeout(timer)
}
if (firtClick) {
func.apply(this, args)
}
timer = setTimeout(() => {
timer = null
}, delay)
}
}
</script>
</body> </html>

效果图如下:

3.来看一下经过节流函数包装之后的代码

代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<input type="text" name="" id="">
<input type="submit" value="提交" id="input">
<script>
const input = document.querySelector('#input');
// input.addEventListener('click', sumbit);
input.addEventListener('click', throuttle(sumbit, 2000)); function sumbit(e) {
console.log('点击');
// console.log(this);
console.log(e); }; function throuttle(func, delay) {
let begin = 0;
return function() {
let currenttime = new Date().getTime();
console.log(currenttime - begin);
if (currenttime - begin > delay) {
func.apply(this, arguments)
begin = currenttime;
}
}
}
</script>
</body> </html>

效果图如下:

4.总结:1.防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗

    2.防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行

参考连接:https://www.bilibili.com/video/BV1Vy4y1y7tj?p=3&share_source=copy_web

Js中的防抖与节流函数的更多相关文章

  1. JS中的防抖与节流

    什么是防抖?and什么是节流?一起来开心的学习下吧. 首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次.举个例子,当 ...

  2. JS中的防抖和节流

    JS-防抖和节流 在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和 ...

  3. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

  4. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  5. JavaScript 中的防抖和节流

    什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...

  6. JS简单实现防抖和节流

    一.什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的. 1. 防 ...

  7. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  8. 防抖与节流函数<转>

    参考连接:https://www.cnblogs.com/zhuanzhuanfe/p/10633019.html https://blog.csdn.net/Beijiyang999/article ...

  9. JS中的substring和substr函数的区别

    1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. ...

随机推荐

  1. [leetcode] 116. 填充同一层的兄弟节点

    116. 填充同一层的兄弟节点 其实就是个二叉树的层次遍历 class Solution { public void connect(TreeLinkNode root) { if (root == ...

  2. 给powershell增加类似于linux的alias功能

    给powershell增加类似于快捷方式的功能(类似于linux的alias) 首先执行 set-executionpolicy remotesigned 允许powershell执行脚本 然后执行e ...

  3. 重新整理 .net core 实践篇—————日志系统之作用域[十七]

    前言 前面介绍了服务与日志之间的配置,那么我们服务会遇到下面的场景会被遇到一些打log的问题. 前面我提及到我们的log,其实是在一个队列里面,而我们的请求是在并发的,多个用户同时发送请求这个时候我们 ...

  4. JAVA并发(7)-并发队列PriorityBlockingQueue的源码分析

    本文讲PriorityBlockingQueue(优先阻塞队列) 1. 介绍 一个无界的具有优先级的阻塞队列,使用跟PriorityQueue相同的顺序规则,默认顺序是自然顺序(从小到大).若传入的对 ...

  5. Springboot中以配置类方式自定义Mybatis的配置规则(如开启驼峰映射等)

    什么是自定义Mybatis的配置规则? 答:即原来在mybatis配置文件中中我们配置到<settings>标签中的内容,如下第6-10行内容: 1 <?xml version=&q ...

  6. 停车场事故频频,AI 达人将摄像头变身安全卫士

    2021 年 2 月,"新内容 新交互" 全球视频云创新挑战赛启幕.本次大赛由英特尔联合阿里云主办,与优酷战略技术合作,天池平台和阿里云视频云团队共同承办.大赛自开赛以来,吸引了全 ...

  7. 【NX二次开发】Block UI 通过浏览选择文件

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  8. BIM,PIM接入GIS 需要解决的关键技术问题

    随着技术发展,跨界融合已经不是新鲜事物,近两年BIM.PIM+GIS一张图的提出,给行业注入了一股清流. 为GIS行业发展带来了新的契机,同时也带来了一些新的挑战.面对挑战,本文将剖析BIM.PIM+ ...

  9. Perm 排列计数

    题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很 ...

  10. 【题解】poj 3162 Walking Race 树形dp

    题目描述 Walking RaceTime Limit: 10000MS Memory Limit: 131072KTotal Submissions: 4941 Accepted: 1252Case ...