防抖节流_关于防抖和节流

虾扯蛋之函数防抖和节流 - 掘金
先贴贴这个哥们的。因为我看了很多，感觉大多都是复制。没有啥思考

在介绍以下这些问题的时候。先公示下我思考的时候出现的问题
1、如果你使用 onclick 和 addEventListenter 需要明白他们的区别，其实没啥好说的但是有一点请记住 onclick 不能使用闭包或者匿名函数。

2、那就是在闭包的情况下函数内部的变量为什么还是可以被return出来的function保持访问等等，可以从call stack和scope独立的角度来理解。（这个我暂时也是迷糊的）但是以闭包的角度看就没啥问题。具体词法作用域的问题堆栈问题可以以后深入

以上问题大致了解之后看我们的重点

一、防抖

概念：当持续触发事件时，合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件（当然分立即执行或者延迟执行）。

什么是防抖？能不能通俗点？举几个栗子

1、武侠高手对付低手，一瞬间就给低手100次，100次全部打中。但是碰到另一个高手，打了100次就就打中了2次

2、上公交本来是1个人上车就司机就关门开车，但是一下来了很多人，于是就都上了才关门开车

<script>var xcd = document.getElementById('xcd');var count = 1;//要执行的操作 数字+1function doSomething() {xcd.innerHTML = count++;};function debounce(doSomething, wait) {var timeout; return function () {var _this = this,_arguments = arguments;console.log(timeout); // 点击次数clearTimeout(timeout);timeout = setTimeout(function () {doSomething.apply(_this, _arguments);}, wait);}}xcd.onclick = debounce(doSomething, 1000);
</script>

上述会出现啥效果呢

就是我连续点击 count 就加1 然后显示出来，如果我超过一秒没有点击再点一次就再加1
到这里你应该彻底明白啥事防抖了

如下图

点击了红色区域2次从没有变成了1

疯狂点击就执行了1次变成了2

以上就是最基本的防抖措施

二、函数节流

概念：持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件

这个不是很绕口，可以理解啊。就是一定时间内只能触发一次

   function doSomething1() {xcd1.innerHTML = count++;};const throttle = (func, wait, ...args) => {let pre = 0;return function () {const context = this;let now = Date.now();console.log(now);if (now - pre >= wait) {func.apply(context, args);pre = Date.now();}}}xcd1.onclick = throttle(doSomething1, 1000);

疯狂点击，这么多次输出这么多时间，生效的只有6次

当然你们还可以扩展

防抖节流_关于防抖和节流相关推荐

提交时是使用防抖还是节流_使用BlockingExecutor进行节流任务提交
提交时是使用防抖还是节流 JDK的java.util.concurrent.ThreadPoolExecutor允许您将任务提交到线程池,并使用BlockingQueue来保存提交的任务. 如果要提交 ...
防抖节流_面试必备考点：防抖与节流
戳蓝字"Web前端严选"关注我们哦! 手写防抖和节流 1.引言「防抖和节流的产生」浏览器的resize.scroll.keypress.mousemove操作时会频繁触发,如果 ...
ege限制鼠标移动的函数_浅谈函数节流和函数防抖
什么是函数节流和函数防抖?下面本篇文章就来给大家浅谈一下函数节流和函数防抖.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言事件的触发权很多时候都属于用户,有些情况下会产生问题 ...
java接口防抖_彻底弄懂节流和防抖
节流和防抖这两个东西,你肯定听过,就是两种优化浏览器性能的手段.相关文章你肯定也看过,如果还是不太清楚,没关系,看完这篇短文,相信你能轻松理解其中差别. 防抖(deounce) 我们先说防抖吧,这里 ...
经常可能会用到的【函数节流和函数防抖】记录下，做下区分
今天突然被人问到,函数节流和函数防抖的区别是什么, 结果我脑子一热直接举了个滚动条的粟子说是优化高频率执行的手段,就记得自己是用setTimeout来实现的. 完了区别是什么??哪个是哪个都蒙B了回 ...
详解防抖函数（debounce）和节流函数（throttle）
函数防抖(debounce) 函数防抖,就是指触发事件后,在 n 秒后只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数的执行时间. 简单的说,当一个动作连续触发,只执行最后一次. 列举: ...
防抖节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点「~函数防抖与节流 ~」每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
事件触发控制_前端性能优化：事件的节流throttle与防抖debounce
scroll 事件是一个非常容易被反复触发的事件,另外,resize 事件.鼠标事件(比如 mousemove.mouseover 等).键盘事件(keyup.keydown 等)都存在被频繁触发的风 ...
防抖节流_【前端面试】节流与防抖
我们用两张图表示什么是节流和防抖. 防抖节流由图可见,防抖的意思是,当用户在一段时间内连续频繁的试图执行一个函数的时候,只有最后一次,函数被真正的执行.节流的意思是,当用户在某一个时刻执行了一次函 ...

防抖节流_关于防抖和节流

防抖节流_关于防抖和节流相关推荐

最新文章

热门文章

防抖 节流_关于防抖和节流

防抖 节流_关于防抖和节流相关推荐

最新文章

热门文章

防抖节流_关于防抖和节流

防抖节流_关于防抖和节流相关推荐