数个月之前，在一次前端的性能优化中，接触到了JS中防抖和节流，一开始还不明白他们的应用在哪里，可后来才知道，这是前端中最基础的性能优化，在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。尤其是在涉及与后端的交互中，前端依赖于某种事件如resize，scroll，发送Http请求，在这个过程中，如果不做防抖处理，那么在事件触发的一瞬间，会有很多个请求发过去，增加了服务端的压力。今天又接触到一个项目，里面的响应式做的非常到位，同时性能优化做的非常好，所以想把JS的防抖和节流做一个总结。（大佬不喜勿喷）

一、函数防抖（debounce）
         当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

下面通过一段代码来演示一个防抖的例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 5000px;
}
</style>
</head>
<body>
<script>
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
</script>
</body>
</html>
大概的效果就是这个样子：

这是我自己的运行结果：

二、函数节流（throttle）
        当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

时间戳方案 
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
定时器方案 
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
 时间戳+定时器
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
效果如下：

三、总结
函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

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

  1. JS的防抖与节流

    JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...

  2. JS的防抖与节流学习笔记

    防抖(debounce):当持续触发事件时,在一定的时间段内,只有最后一次触发的事件才会执行. 例: function debounce(fn, wait) { var timer = null; r ...

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

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  4. JS的防抖，节流，柯里化和反柯里化

    今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟wc,有点高大上啊.事实上,我们可以在不经意间用过他们但是你却不知道他们叫什么,没关系,相信看了今天的文章你会有一些收获的 节流 ...

  5. js实现防抖，节流

    防抖函数. 将几次操作合并为一次操作进行.设置一个计时器,规定在延迟时间后触发函数,但是在延迟时间内如果再次触发,就会取消之前的计时器.如此,只有最后一次操作能触发.代码如下: function de ...

  6. 彻底搞懂JavaScript的闭包、防抖跟节流

    最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...

  7. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  8. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

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

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

随机推荐

  1. Python基础学习之Python主要的数据分析工具总结

    Python主要是依靠众多的第三方库来增强它的数据处理能力的.常用的是Numpy库,Scipy库.Matplotlib库.Pandas库.Scikit-Learn库等. 常规版本的python需要在安 ...

  2. 第四章 DOM节点操作

    1.什么是DOM:DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类:(1)Core Dom:可以对html, ...

  3. 内存地址 id

    def a(): return b def b(): print('666')c = a()print(c) #打印16进制的内存地址print(b) #打印16进制的内存地址print (id(c) ...

  4. 6.MongoDB4.0在Windows环境的下载、安装、配置

    简单来说:MongoDB4.0在Windows下已经不需要再次配置db文件夹之类操作,安装完成直接进行连接测试即可,以下是具体过程(此前网上很多的教程都已经过时) 1.下载:https://www.m ...

  5. HTTP请求中POST与GET的区别

      本文章已收录于:   一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. ...

  6. 【 剑指Offer 1 】数据结构

    数据结构是技术面试中的重点,总结以下几种常见的必须熟练掌握数据结构. 数组 字符串 链表 树 栈和队列 数组和字符串是两种最基本的数据结构,连续内存: 链表和树是面试中出现频率最高的: 栈与递归密切相 ...

  7. Linux 查看系统状态

    查看系统状态 命令:vmstat 命令:vmsta 1 10               #每1秒钟1次显示10次. r:几个进程在占用cpu b:等待IO值 Swpd:多少交换内存 free:剩余内 ...

  8. 主从复制跳过错误(未采用GTID)

    DB:5.6.15 主从库没有采用GTID 案例1:从库对象不存在mysql> show slave status \G;*************************** 1. row * ...

  9. [c/c++] programming之路（17）、高级指针

    一.二级指针 二级指针的作用:1.函数改变外部变量指针2.外挂改变一个指针的值 #include<stdio.h> #include<stdlib.h> void main() ...

  10. 用python完成带有进度条的圆周率计算

    代码如下:import math import time scale= s,m,=, print("执行开始".center(scale//2, "-")) s ...