前言
这对于前端的优化起到了非常重要的作用,本文将这两个技术通过函数进行封装,方便在项目中复用。
什么是节流? 用户网速较慢时,点击了按钮之后没有反应,用户会急忙再次点击(甚至狂点),如果不加以控制,服务器会通过前端收到多次请求(前一个请求还没处理完又请求了),差矣。用大白话说,就是在规定时间内,无论用户点击了多少次, 函数只触发一次。
什么是防抖? 用户在搜索框中输入关键字搜索时,一般都会绑定 @input 事件,这就意味着每次当输入框内容变化(动作)时就会触发函数(发起网络请求),这无疑会造成带宽浪费,差矣。用大白话说,就是在规定时间内,用户导致动作被连续频繁触发的情况下,函数只会被执行一次。
函数封装建议您在 static
目录下新建一个 tools.js
,后续可以将所有的工具函数都封装在此。
一键复制或选择性复制以下代码。
/**
* 函数节流
* @description 在规定时间内 无论用户点击了多少次 函数只触发一次
* @param {Function} func - 要节流的函数
* @par