经常可能会用到的【函数节流和函数防抖】记录下，做下区分

今天突然被人问到，函数节流和函数防抖的区别是什么，
结果我脑子一热直接举了个滚动条的粟子说是优化高频率执行的手段，就记得自己是用setTimeout来实现的。
完了区别是什么？？哪个是哪个都蒙B了
回家想想，有些东西只有当自己要用到的时候，结合当前的需求才能真正想到要怎么做，
其实还是自己缺少总结，把原理理解成一种常态会更深刻

一、概念解释

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。
大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。
同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

函数节流：是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。

// 函数节流
var flag= null;
document.getElementById("throttle").onscroll = function(){if(flag){// 判断是否已空闲，如果在执行中，则直接returnreturn;}flag= true;setTimeout(function(){console.log("函数节流");flag = false;}, 300);
};

函数防抖：是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){clearTimeout(timer); // 清除未执行的代码，重置回初始化状态timer = setTimeout(function(){console.log("函数防抖");}, 300);
};

转载于:https://www.cnblogs.com/MrZouJian/p/8611064.html

经常可能会用到的【函数节流和函数防抖】记录下，做下区分相关推荐

ege限制鼠标移动的函数_浅谈函数节流和函数防抖
什么是函数节流和函数防抖?下面本篇文章就来给大家浅谈一下函数节流和函数防抖.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言事件的触发权很多时候都属于用户,有些情况下会产生问题 ...
JavaScript函数节流和函数防抖
1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多.例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间.连续尝试进行过多的DOM操作可能会导致浏览器挂起,甚至崩溃 ...
JavaScript函数节流和函数防抖之间的区别
函数防抖所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. let box = document.getElementById('bo ...
JavaScript 函数节流 throttle 和防抖 debounce
今天和别人聊到JavaScript函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助. 节流 - 频繁操作,间隔一定时间去做一件事举例说明:假定时间间 ...
jquery-滚轮事件与函数节流-案例整屏滚动 -等待整理
源代码 https://cloud.189.cn/t/Ivi2mqZvyq2i 练习用,无效果的 https://cloud.189.cn/t/ieaii2E7Vriy (整屏滚动练习源码) 滚轮事件 ...
函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
函数节流与防抖的实现
函数节流与函数防抖最近由于处于互联网大厂的秋招季节,因此这些天都在看前端性能优化和算法方面的知识.在性能优化方面,看了网上的一些文章,同时看完了<高性能网站建设指南>和<高性能Ja ...
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间:当预定时间内没有再次调用该函数,则执行响应逻辑. 函数节流(throttle): ...
高阶函数 - 函数节流
/*** 函数节流 - 限制函数被频繁调用* @param {Function} fn [需要执行的函数]* @param {[type]} interval [限制多长的时间再重复执行fn]*/va ...

经常可能会用到的【函数节流和函数防抖】记录下，做下区分

一、概念解释

经常可能会用到的【函数节流和函数防抖】记录下，做下区分相关推荐

最新文章

热门文章