【JS实用技巧篇】01-函数防抖|节流

好吃懒洋洋

已于 2022-10-17 08:53:08 修改

阅读量530

点赞数 13

分类专栏： # js实用技巧篇文章标签： javascript 前端开发语言

于 2022-10-01 08:36:36 首次发布

本文链接：https://blog.csdn.net/Q_3603/article/details/127130198

版权

js实用技巧篇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

📖JavaScript专栏：📑js实用技巧篇

👊👊👊该专栏博主会持续更新，目的是给大家分享一些非常实用的技巧，同时巩固自己的基础，共同进步✨✨✨

💡💡💡欢迎大家在评论区留言交流技术以及学习方法、心得方面的问题。💡💡💡

👇🏻👇🏻👇🏻你的一键三连是对我的最大支持❤️❤️❤️
🌟🌟🌟祝大家国庆快乐！！！🌟🌟🌟

📑前言

本专栏主要是一些实用技巧，带大家灵活运用、并理解其思想；另外后续也会开设js核心知识方面的专栏带大家深入理解js这门语言。由于个人刚完成js阶段的学习，却没有什么项目经验，另外感觉自己基础也不是很好；所以梳理了下js学习过程中个人认为必须掌握的一些知识点、技巧等，以此为后期的学习打下坚实的基础。

📑函数防抖|节流

本篇主要讲解函数防抖、节流的实现及其原理，并通过应用场景带大家更直观地理解

📃函数防抖

先来看看实际开发中经常用到函数防抖场景：input对话框的input事件监听

无函数防抖效果1：

在这里插入图片描述

代码1：

在这里插入图片描述

有函数防抖效果2：

在这里插入图片描述

代码2：

在这里插入图片描述

通过上面有无函数防抖的对比，可以看出防抖函数的作用，接下来就带大家使用并理解其原理

防抖函数的实现如下：

/**
 * @param {Function} fn  需要延迟执行的函数
 * @param {Number} delay 函数fn延迟执行的时间
 * @returns 返回一个函数，在delay时间过后执行该函数； 如果某事件再次被触发，清除前一个计时器，即前一次在delay时间过后要执行的函数被清除，然后再次返回该函数；即每触发防抖函数，都会重新返回一个新的在delay时间过后要执行的函数
 */
function debounce(fn, delay = 1000) {
  let timerId;//声明一个计时ID
  return function () {
    clearTimeout(timerId);//清除前面的计时ID 
    timerId = setTimeout(() => fn.call(this, ...arguments), delay);
  };
}

函数防抖：

让某个函数的执行推迟，如果在推迟期间执行函数，会将函数进一步推迟
当用户多次触发某事件时，会造成频繁向后端服务器发送请求
为了避免这种情况，函数防抖保证只在最后一次触发后执行函数，也就是只向后台发送最后一次的请求

debounce函数部分讲解：

arguments是用来存放传递给函数的参数的一个伪数组，它是所有（非箭头）函数中都可用的局部变量(引用MDN官方的原话)，...arguments用到了ES6中的展开运算符...，即将该伪数组展开；则上面等效于fn.call(this,arg1,arg2...)
此处的fn.call(this, ...arguments) 也可用fn.apply(this,arguments)替换，此处的.call()和.apply()两个都是Function的原型方法，功能相同，传参方式不同；call是传参数列表，而apply传的是数组，而其中的this是调用call和apply函数的新this，即此时调用call和apply方法的函数的this为call和apply中的第一个参数，本人解释的可能不太清楚，可以查询官方文档call()、apply()相关解释。

关于this绑定上面说的可能有点绕，来看看下面这个实例演示，此处创建了一个父构造函数和两个子构造函数：

function Animal(name) {
  this.name = name;
}

function Fish(name, ability) {
  Animal.call(this, name);//此处等同于 this.name = name;
  this.ability = ability;
}

function Dog(name, ability) {
  Animal.call(this, name);//此处等同于 this.name = name;
  this.ability = ability;
}

var fish1 = new Fish("小鱼", "游得快");
var dog1 = new Dog("小狗", "跑得快");

console.log(fish1, dog1);

输出：

在这里插入图片描述

📃函数节流

关于函数节流有两种版本，代码实现如下：

//时间戳,开始阶段就会触发
function throttle(fn, wait) {
  let previous = 0; //相当于任务开始时间
  return function () {
    let now = Date.now(); //获取当前时间戳
    if (now - previous > wait) {
      fn.apply(this, arguments);
      previous = now;
    }
  };
}

//计时器，结束阶段触发
function throttle(fn, wait) {
  let timerId; //声明计时器ID
  return function () {
    if (!timerId) {
      timerId = setTimeout(() => {
        timerId = null;
        fn.apply(this, arguments);
      }, wait);
    }
  };
}