前言

事件的触发权很多时候属于用户,可能会出现下列问题:

  • 向后台发送数据,用户频繁触发,对服务器造成压力;
  • 一些浏览器事件,如window.onresize,window.mousemove等,触发的频率会非常高,会造成浏览器性能问题。

如果碰到这些问题,那就需要用到函数节流与防抖了。

一、函数节流(throttle)

函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。

有个需要频繁触发函数,处于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效。

1.如何实现

其原理是用时间戳来判断是否已到回调执行时间,记录上次执行的时间戳,然后每次触发scroll事件执行回调,回调中判断当前时间戳距离上次执行的时间戳的间隔是否已经达到规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环;

 html,
body {
height: 500%; // 让其出现滚动条
}
function throttle(fn,delay){
// 记录上一次函数触发时间
var lastTime = 0;
return function(){
// 记录当前函数触发时间
var nowTime = Date.now();
if(nowTime - lastTime > delay){
// 修正this指向
fn.call(this);
// 同步时间
lastTime = nowTime;
}
}
} document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)
function throttle(fn, interval = 300) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, interval);
};
}

运用闭包的特性 -- 可以使变量 lastTime 长期保存着内存中

2.函数节流应用场景

需要间隔一定时间触发回调来控制函数调用频率:

  • DOM 元素的拖拽功能实现(mousemove)
  • 搜索联想(keyup)
  • 计算鼠标移动的距离(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次

二、函数防抖(debounce)

防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。

1.如何实现

原理:
第一次调用函数时,创建一个定时器,在指定的时间间隔后执行代码。第二次调用函数时,会清除前一个定时器并设置另一个。如果前一个定时器尚未执行,就将其替换成一个新的定时器,然后延迟一定时间再执行。

<button id='btn'>按钮</button>
<script>
function debounce(fn,delay){
// 记录上一次的演示器
var timer = null;
return function(){
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function(){
fn.call(this);
},delay)
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('点击事件被触发' + Date.now())
}, 1000)
</script>

运用闭包的特性 -- 可以使变量 timer 长期保存着内存中

2.函数防抖应用场景

对于连续的事件响应我们只需要执行一次回调:

  • 每次 resize/scroll 触发统计事件
  • 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)

三、总结

函数节流 和 函数防抖 的核心就是限制某一个方法频繁触发,巧妙运用 setTimeout 来存放待执行的函数,这样可以很方便的利用  clearTimeout 在合适的时机来清除待执行的函数。

使用 函数节流 和 函数防抖 的目的,是为了节约计算机资源。

随笔参考
  https://www.jianshu.com/p/4e009e538503
  https://juejin.im/entry/58c0379e44d9040068dc952f
感谢博主分享!

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

  1. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  2. JS函数节流和防抖

    看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...

  3. js函数节流和防抖的理解与实现

    一:函数防抖1.理解:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间2.思路:每次触发事件时都取消之前的延时调用方法 3.实现: function debounce ...

  4. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

  5. JS在项目中用到的AOP, 以及函数节流, 防抖, 事件总线

    1. 项目中在绑定事件的时候总想在触发前,或者触发后做一些统一的判断或逻辑,在c#后端代码里,可以用Attribute, filter等标签特性实现AOP的效果,可是js中没有这种用法,归根到本质还是 ...

  6. JS函数节流和函数防抖问题分析

    问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...

  7. js函数节流和函数防抖

    概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的 ...

  8. JS定时器实现函数节流和防抖 -简单实现对比 -适用地方

    如题 (总结要点) 防止重复点击! 最近项目中遇见这个"函数抖动"的问题!快速点击前端xx按钮,造成数据多次加载进页面里,正常只显示10条数据,结果显示了20条数据,异常! 出现原 ...

  9. Underscore.js 函数节流简单测试

    函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js  本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...

随机推荐

  1. DSAPI多功能组件编程应用-反射相关

    [DSAPI.DLL下载地址]       在.Net中,反射技术是一种入门困难,熟用快速的东西,对于没有接触过反射技术的程序员来说的确是头疼的,看一旦自己写过了,上手就非常简单了.在本节,将部分.N ...

  2. 杭电ACM2016--数据的交换输出

    数据的交换输出 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  3. 重写(override)和重载(overload)的区别

    override(重写): 是进行基类中函数的重写,是面向对象的概念 重载(overload):是方法的名称相同,参数或参数类型不同,进行多次重载以适应不同的需要.overload 是面向对象的概念.

  4. 数据结构(java版)学习笔记(序章)

    程序=数据结构+算法 序章做一个简单的思维导图,方便理解数据结构这门课的大纲,接下来我们将是按照线性表,栈,队列,串,树和图的顺序依次往下学.

  5. 收集的博客网址springboot、cloud

    纯洁的微笑(spring-boot,cloud等)

  6. JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  7. SQL Challenges

    平台: http://www.zixem.altervista.org/SQLi/ Level 1 (Super Easy) http://www.zixem.altervista.org/SQLi/ ...

  8. 39.Odoo产品分析 (四) – 工具板块(8) – 生产力(1)

    查看Odoo产品分析系列--目录 生产力相当于一个即时贴或便签.用便签或待办事项处理个人的任务.  安装生产力模块,得到"便签"主菜单:  创建一个便签,该表单对应note.not ...

  9. 如何在WIN10内置Ubuntu中有多个terminal

    使用的是tmux来实现在WIN10的内置Ubuntu实现多终端窗口 先安装tmux:sudo apt-get install tumx 启动tmux,tmux 然后就可以在tmux中实现多窗口.其操作 ...

  10. 珍藏版Chrome插件送给你们,不仅是程序员必备

    大家好,消失了几天我又满血复活归来了,最近这几天太忙了一直在加班工作,这不昨天又干到凌晨一点,今天早上七点就起来了,到现在还都没有休息,现在只剩半血了,不对应该说现在只能爬着走了,但是一想到几天没有更 ...