一、节流（Throttle）

无论节流还是防抖，我们都会在事件的处理函数中去统计时间判断，那函数内部有，每一次执行函数，都会对内部变量进行一个判断，这个变量在函数执行之后，不应该被销毁，所以这里用到闭包

场景：

页面有一个按钮，用户疯狂点点点，每点一次，都要触发一次处理函数，服务器承受不了
鼠标不断点击触发，mousedown（单位时间内只触发一次） mousemove事件

有两种主流的实现方式，一种是使用时间戳（好理解），一种是设置定时器（较麻烦）。

这里我使用时间戳实现节流函数每隔固定的时间处理函数

代码：

<body><button>按钮</button><script>//  时间戳实现节流函数：function throttle(fn, delay) {var previous = 0;// 使用闭包返回一个函数并且用到闭包函数外面的变量previousreturn function () {var now = new Date(); //拿到当前的时间if (now - previous > delay) {// 每次触发事件的时候，都会拿到一个当前的时间//当前时间-调用函数最开始的时间  如果超过固定间隔时间fn(); //执行处理事件previous = now; //将当前触发事件的时间 赋值  成 当前事件首次触发的时间}};}document.querySelector("button").onclick = throttle(function () {console.log(1);}, 2000);</script></body>

示意图：这里时间间隔我设置成了2s

二、防抖（Debounce）

场景：

1.search搜索框输入，只需用户最后一次输入完在发送请求。

2.表单的按钮提交事件，例如登录，发短信，避免用户点击太快，以至于发送了多次请求，加大服务器的压力

代码：

 <body><button>按钮</button><script>// 防抖方法: 使用闭包，操作同一个timer：只有最后一次操作生效// 触发时，创建定时器，当发现定时器存在就清除当前定时器，创建新的定时器//首次触发的时候  会创建一个setTimeout去等  此时如果再次触发 将timer清除function debounce(fn, delay) {var timer;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(function () {fn();}, delay);};}document.querySelector("button").onclick = debounce(function () {console.log(1);}, 2000);</script></body>

示意图：这里的时间间隔设置成2s

说明：就是频繁点击时，会消除上一次的timer，创建自己的timer，等到最后一次点击时，比方说操作了8次，第七次timer被清除了，由于没有再触发Debounce防抖函数，就没有再创建timer，这个timer一直存在，等到时间间隔，就会去执行fn（）

<body><span>0</span><button>点击我+1</button><script>var count = 0;let button  = document.querySelector('button')let span =  document.querySelector('span')// 手写节流button.onclick= debounce(function(){count++;span.innerHTML=count},1000)节流function throttle (fn,delay){var previous = 0;return function(){var now = new Date();if(now-previous>delay){fn();previous = now}}   }function debounce(fn,delay){var timer = null;return function(){if(timer){clearTimeout(timer)}timer=setTimeout(function(){fn()},delay)}}</script></body>

节流（Throttle）与防抖（Debounce）区别与demo实现+ 图解相关推荐

事件触发控制_前端性能优化：事件的节流throttle与防抖debounce
scroll 事件是一个非常容易被反复触发的事件,另外,resize 事件.鼠标事件(比如 mousemove.mouseover 等).键盘事件(keyup.keydown 等)都存在被频繁触发的风 ...
【前端帮帮忙】第7期关于节流(throttle)和防抖(debounce)的理解
节流和防抖在我们平时的项目中挺常用的,也是面试中经常会被提问的知识点,今天我们一起来学习一下. 节流简单理解就是:控制函数每隔n秒执行一次. 作用防止用户高频率的触发事件,刚好这个事件又需要处理大 ...
JavaScript 函数节流 throttle 和防抖 debounce
今天和别人聊到JavaScript函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助. 节流 - 频繁操作,间隔一定时间去做一件事举例说明:假定时间间 ...
节流(Throttle)和防抖(Debounce)
为啥要使用防抖和节流在项目开发中,我们经常用到的滚动事件或者用户输入事件,都是一些高频事件,如果对这类事件触发的频率没有节制,就会加重浏览器和服务器的负担.节流和防抖目的就是减少事件触发的次数. 1 ...
函数防抖debounce和节流throttle
debounce 函数防抖 1.什么是函数防抖函数防抖是优化高频率执行 js 代码的一种手段可以让被调用的函数在一次连续的高频率操作过程中只被调用一次 2.函数防抖的作用减少代码执行次数,提升网 ...
JS高级之防抖 debounce - throttle 节流
目录一.防抖 debounce 1. 概念 2. 应用场景 3. 使用 underscore 实现防抖 01 - 代码 02 - 效果 4. 实现 01 - 基本实现代码效果 02 - 优化 = ...
函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
Java版的防抖(debounce)和节流(throttle)
概念防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时节流(throttle) 当持续触发事件时, ...
SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章. Jerry之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request, ...

节流（Throttle）与防抖（Debounce）区别与demo实现+ 图解

一、节流（Throttle）

二、防抖（Debounce）

节流（Throttle）与防抖（Debounce）区别与demo实现+ 图解相关推荐

最新文章

热门文章