文章转载自:木上有水

什么是防抖?什么是节流?

  工作中我们经常会用一些方法监听某些事件的完成,比如scroll、resize、keyup等。

  常规事件触发的时候,比如scroll,会在短时间内触发多次事件绑定,造成性能的浪费!

1、防抖

  什么是防抖:多次事件触发后、事件处理函数只执行一次,并且是在触发操作结束时执行。

  原理:延时操作处理函数、若设定的延时到来之前、再次触发函数、则清除上一次的延时操作定时器、重新定时。(有点绕,试验一下就懂了)

  代码(例:scroll):

let timer;
window.onscrool = function(){
if(timer){
clearTimeout(timer);
}
   console.log('方法在一直执行');
timer = setTimeout(function(){
//滚动条位置
  let scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
  timer = undefined;
     console.log('滚动条位置:' + scrollTop);
  },500);
}

   封装:

/**
* 防抖函数
* @param method 事件触发的操作
* @param delay 多少毫秒内连续触发事件,不会执行
* @returns {Function}
*/
function debounce(method,delay) {
let timer = null;
return function () {
let self = this,
args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function () {
method.apply(self,args);
},delay);
}
} window.onscroll = debounce(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
},200)

2、节流

  什么是节流:触发函数事件后,短时间内无法连续调用,只有执行完上一次的函数后,过了规定时间才可以调用下一次。

  原理:对处理函数进行延迟操作、若设定时间到来之前,再次出发事件、则清除上一次的延时操作定时器,重新定时。

  代码(例:scroll):

  

let startTime = Date.now(); //开始时间
let time = 500; //间隔时间
let timer;
window.onscroll = function throttle(){
let currentTime = Date.now();
if(currentTime - startTime >= time){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
startTime = currentTime;
}else{
clearTimeout(timer);
timer = setTimeout(function () {
throttle()
}, 50);
}
}

  封装:

/**
* 节流函数
* @param method 事件触发的操作
* @param mustRunDelay 间隔多少毫秒需要触发一次事件
*/
function throttle(method, mustRunDelay) {
let timer,
args = arguments,
start;
return function loop() {
let self = this;
let now = Date.now();
if(!start){
start = now;
}
if(timer){
clearTimeout(timer);
}
if(now - start >= mustRunDelay){
method.apply(self, args);
start = now;
}else {
timer = setTimeout(function () {
loop.apply(self, args);
}, 50);
}
}
}
window.onscroll = throttle(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
},800)

JS 防抖函数和节流函数的更多相关文章

  1. [手写系列] Spirit带你实现防抖函数和节流函数

    前言 防抖函数和节流函数,无论是写业务的时候还是面试的时候,想必大家已经听过很多次了吧.但是大家在用到的时候,有了解过他们之间的区别嘛,他们是如何实现的呢?还是说只是简单的调用下像lodash和und ...

  2. JS奇淫巧技:防抖函数与节流函数

    应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...

  3. js实现防抖函数和节流函数

    防抖函数(debounce) 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行: 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用 ...

  4. js 防抖 debounce 与 节流 throttle

    debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...

  5. JS基石之-----防抖节流函数

    防抖和节流函数   阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别   一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...

  6. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  7. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  8. 简单的节流函数throttle

    在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制 ...

  9. js函数的节流与防抖

    一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...

随机推荐

  1. 从分治算法到 Hadoop MapReduce

    从分治算法说起 要说 Hadoop MapReduce 就不得不说分治算法,而分治算法其实说白了,就是四个字 分而治之 .其实就是将一个复杂的问题分解成多组相同或类似的子问题,对这些子问题再分,然后再 ...

  2. Oracle 10g 应用补丁PSU 10.2.0.5.180717

    最近测试了一下在Oracle 10g下面(单实例下面)升级.应用补丁PSU 10.2.0.5.180717,打这个补丁的主要原因是 Oracle 将于 2019年6月启用新的SCN兼容性,并且由于Bi ...

  3. macos 远程 windows 10

    使用的工具:Parallels Client 免费,可以从windows store 免费下载: 只有这个最好用,希望能帮到你.和原生的windows 远程桌面功能很像:

  4. 使用C++对物理网卡/虚拟网卡进行识别(包含内外网筛选)

    简介 在Socket编程的时候,我们需要实时获取我们所需要的IP地址.例如在编写后门的时候,我们可能需要获得有效的外网IP或内网IP:有时候我们可能需要判断我们获取的是否是虚拟机网卡,这时候就需要对每 ...

  5. 网络编程_tcp与dup协议简单应用

    老师的博客:http://www.cnblogs.com/Eva-J/articles/8066842.html 计算机网络基础 :http://www.cnblogs.com/Eva-J/artic ...

  6. Git的可视化工具SourceTree管理代码 SourceTree的使用

    出处:https://blog.csdn.net/android_zhengyongbo/article/details/72885860 其他参考资料https://www.cnblogs.com/ ...

  7. kernel笔记——进程调度

    调度器完成以下任务: 时钟中断(或类似的定时器)时间内刷新进程的时间片,设置进程调度标志 系统调用返回或中断完成时检查调度标志 schedule函数 内核代码中完成进程调度的函数为schedule() ...

  8. springboot aop + logback + 统一异常处理 打印日志

    1.src/resources路径下新建logback.xml 控制台彩色日志打印 info日志和异常日志分不同文件存储 每天自动生成日志 结合myibatis方便日志打印(debug模式) < ...

  9. Linux查询进程和结束进程

    1.  ps -ef |grep redis ps:将某个进程显示出来-A 显示所有程序. -e 此参数的效果和指定"A"参数相同.-f 显示UID,PPIP,C与STIME栏位. ...

  10. 返回数组中指定的一列,将键值作为元素键名array_column

    array_column() 函数 从记录集中取出 last_name 列: <?php // 表示由数据库返回的可能记录集的数组 $a = array( array( 'id' => 5 ...