JavaScript专题系列之节流(系列四)

节流

目录

  • 前言
  • 一、核心和基本实现
  • 二、节流进阶
  • 写在最后

前言

接着《JavaScript专题进阶之防抖》,我们来聊一聊节流——另一个优化函数的思想。

我们还是以移动事件举例


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        #wrapper {
            width: 100%;
            height: 140px;

            background: rgba(0, 0, 0, 0.8);

            color: #fff;
            font-size: 30px;
            font-weight: bold;
            line-height: 140px;
            text-align: center;
        }
    style>
head>

<body>
    <div id="wrapper">div>

    <script>
        var count = 1;
        function moveAction () {
            oWrapper.innerHTML = count++;
        }

        var oWrapper = document.querySelector('#wrapper');
		oWrapper.onmousemove = moveAction;
    script>
body>

html>

它的效果是这样:

JavaScript专题系列之节流(系列四)_第1张图片

一、核心和基本实现

节流的原理很简单:如果你持续触发某个事件,特定的时间间隔内,只执行一次。

关于节流的实现,有两种主流的实现方式:

  1. 时间戳思路
  2. 定时器思路

1.1 时间戳思路

顾名思义,通过两个时间戳来控制时间间隔,当触发事件的时候:

  1. 我们取出当前的时间戳 now
  2. 然后减去之前执行时的时间戳(首次值为 0 ) prev
  3. 如果大now - prev > wait,证明时间区间维护结束,执行指定事件,更新prev

根据这一思路,我们就可以实现第一版代码了:

oWrapper.onmousemove = throttle(moveAction, 1000);

function throttle(func, wait) {
    var _this, arg;
    var prev = 0; // 上一次触发的时间,第一次默认为0

    return function () {
        var now = Date.now(); // 触发时的时间
        _this = this;
        if (now - prev > wait) {
            func.apply(_this, arg); // 允许传入参数,并修正this
            prev = now; // 更新上一次触发的时间
        }
    }
}

来看看借助它,效果是什么样的:

JavaScript专题系列之节流(系列四)_第2张图片

我们可以看到:

  1. 当鼠标移入的时候,事件立刻执行
  2. 每过 1s 会执行一次,且移动2.5s会执行2次,意味着动作停止后不会再执行

1.2 定时器思路

利用定时器来保证间隔时间内事件的触发次数

  1. 创建定时器timer,记录当前是否在周期内;
  2. 判断定时器是否存在,若存在则直接结束,否则执行事件;
  3. wait时间之后再次执行,并清掉定时器;

当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。

function throttle(func, wait) {
    var _this, arg;
    var timer; // 初始化
    return function () {
        _this = this; // 记录this
        arg = arguments; // 记录参数数组
        if (timer) return; // 时候未到
        timer = setTimeout(() => {
            func.apply(_this, arg); // 允许传入参数,并修正this
            timer = null;
        }, wait);
    }
}

来看看借助它,效果是什么样的:

JavaScript专题系列之节流(系列四)_第3张图片

但是,我们可以看到:

  1. 当鼠标移入的时候,事件不会立刻执行;
  2. 鼠标定制后wait间隔后会执行一次

1.3 两种思路的区别

时间戳 定时器
“起点” 立即执行 n 秒后执行
“终点” 停止后不会执行 停止会再执行一次

二、节流进阶

结合两种思想完成一个可以立即执行,且停止触发后再执行一次的节流方法:

// 第三版
function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

效果演示如下:

JavaScript专题系列之节流(系列四)_第4张图片

我在看代码的时候,我是反复打印数据才理解为什么会这样做,一起加油~

参考

  • 冴羽大大的Js系列
  • lodash.js

写在最后

在这里插入图片描述

前端专项进阶系列的第二篇文章,希望它能对大家有所帮助,如果大家有什么建议,可以在评论区留言,能帮到自己和大家就是我最大的动力!

JavaScript专题系列:

  1. JavaScript中的变量提升与预编译,一起去发现Js华丽的暗箱操作(系列一)
  2. JavaScript专题之数组去重(系列二)
  3. JavaScript专题之数组防抖(系列三)
  4. 本文

另外推荐大家阅读一下我的《前端内功进阶系列》

关于我

  • 花名:余光
  • WX:j565017805
  • 沉迷JS,水平有限,虚心学习中

其他沉淀

  • JavaScript版LeetCode题解
  • 前端进阶笔记
  • CSDN

如果您看到了最后,不妨收藏、点赞、关注一下吧!您的三连就是我最大的动力,虚心接受大佬们的批评和指点,共勉!

你可能感兴趣的:(【前端进阶】,#,JavaScript专项进阶,节流,JavaScript,前端,js专题)