浅谈JS函数防抖及应用场景
【前言】
在工作中，我们可能碰到这样的问题：
- 用户在搜索的时候，在不停敲字，如果每敲一个字我们就要调一次接口，接口调用太频繁，给卡住了。
- 用户在阅读文章的时候，我们需要监听用户滚动到了哪个标题，但是每滚动一下就监听，那样会太过频繁从而占内存，如果再加上其他的业务代码，就卡住了。
所以，这时候，我们就要用到 防抖与节流 了。
那么，讲到 防抖与节流，我们可以顺带探秘下 重绘与回流。
说起 重绘与回流，我们就顺带把 浏览器输入 URL 后发生的事情 也关注一下，从而引出 DNS、TCP 等知识点，最终串起来构成本文的轮廓，方便 jsliang 和小伙伴们对这块知识的整理与记忆。
【主体】
本节主要介绍函数防抖debounce
下面我们有段防抖小案例代码。
如果小伙伴们手头有电脑，并感兴趣想先自己思考下什么是防抖。可以将代码复制到浏览器，尝试点击按钮，并关注下控制台，看看 Console 是如何打印的。
如果小伙伴们手头没有电脑，那么咱一起先瞅瞅代码实现，再看看下面 GIF 演示。（这样效果没有自己敲的直白有效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button> <script>
window.onload = function() {
// 1、获取这个按钮，并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce));
} // 2、防抖功能函数，接受传参
function debounce(fn) {
// 4、创建一个标记用来存放定时器的返回值
let timeout = null;
return function() {
// 5、每次当用户点击/输入的时候，把前一个定时器清除
clearTimeout(timeout);
// 6、然后创建一个新的 setTimeout，
// 这样就能保证点击按钮后的 interval 间隔内
// 如果用户还点击了的话，就不会执行 fn 函数
timeout = setTimeout(() => {
fn.call(this, arguments);
}, );
};
} // 3、需要进行防抖的事件处理
function sayDebounce() {
// ... 有些需要防抖的工作，在这里执行
console.log("防抖成功！");
} </script>
</body>
</html>
很好，相信小伙伴们已经看完了代码，下面我们看看它的演示：
这时候，我们可以抛出防抖的概念了：
- 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
结合上面的代码，我们可以了解到，在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。意思就是：这件事儿需要等待，如果你反复催促，我就重新计时！
空讲无益，show you 场景：
- 有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。
小伙伴们可以尝试看着上面的案例，先自己实现一遍这个场景的解决，如果感觉不行，那就看：《防抖和节流的应用场景和实现》
知识点补充：何为
arguments？
首先，后端转前端的同学，可以将arguments理解为能实现重载函数功能的工具。
然后，我们举个例子：在function test()这个方法中，由于我们不确定变量有多少，比如test("jsliang", 24)，又或者test("LiangJunrong", "jsliang", "24")，这时候只需要在函数test中用arguments接收就行了。
最后，在function test() { let arr1 = argument[0] }中，arr1就可以获取到传进来的第一个变量。
所以，fn.call(this, arguments)其实是将不确定变量替换到函数中了。
参考资料 1：《闲聊 JS 中的 apply 和 call》
参考资料 2：《js 中 arguments 的用法》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<input type="text" name="search"> <script type="text/javascript">
var searchInput = document.querySelector('input[name="search"]');
/*绑定事件*/
searchInput.addEventListener('keyup',debounce(getInputValue),false);
/* 防抖函数 */
function debounce(fn){
var timer = null;
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.call(this,arguments)
},)
}
}
/* 调用获取输入值 */
function getInputValue(){
console.dir(this.value)
}
</script>
</body>
</html>
.
浅谈JS函数防抖及应用场景的更多相关文章
- 浅谈JS函数节流及应用场景
说完防抖,下面我们讲讲节流,规矩就不说了,先上代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈 js 语句块与标签
原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...
- 浅谈JS面向对象
浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 浅谈JS严格模式
浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...
随机推荐
- 《数据挖掘导论》实验课——实验二、数据处理之Matplotlib
实验二.数据处理之Matplotlib 一.实验目的 1. 了解matplotlib库的基本功能 2. 掌握matplotlib库的使用方法 二.实验工具: 1. Anaconda 2. Numpy, ...
- go语言设计模式之bridge
著名的桥接模式罗.. bridge.go package bridge import ( "errors" "fmt" "io" ) typ ...
- xampp配置二级域名通过不同端口访问不同网站
首先需要在xampp\apache\conf\extra\httpd-vhost.conf中写入配置的二级域名 <VirtualHost *:8081> // 该网站通过监测8081端口 ...
- Note | 常用指令，工具，教程和经验笔记
目录 图像处理 机器学习和数学 编程环境和工具 写作工具 其他 图像处理 获取图像频域并分解为高低频:https://www.cnblogs.com/RyanXing/p/11630493.html ...
- json解析模块
json.loads(json) 把json格式的字符串转为Python数据类型 html_json = json.loads(res.text) json.dumps(python) 把 pytho ...
- 跳出"低水平勤奋陷阱"
"低水平勤奋陷阱":摘记更多的知识 读书是获得知识的最基本,最重要的方式,但读书需要方法 所谓"低水平勤奋陷阱",就是花费了大量的时间和精力,但得到的结果却微乎 ...
- IT兄弟连 HTML5教程 HTML5技术的应用现状及HTML5平台的兴起
HTML5的优良特性很快被各种类型的网站利用,比如文件拖拽到网页上传功能,多数即使用HTML5提供的新属性就可以完成,来实现素材的免插件拖放.因此,HTML5技术实际上在国内已经获得了较广泛的应用与支 ...
- ACL学习
H3C ACL主要有三种: 标准ACL: 2000-2999,基于源IP地址分配: 高级ACL:3000-3999,基于源目IP地址分配,报文优先级等三.四层信息: 二层ACL:4000-4999,基 ...
- consolidate.js 一个Node.js 模板引擎的集合
consolidate是一个模板引擎的结合体.包括了常用的jade和ejs.通过配置我们就可以使用多种模板引擎. consolidate.js安装 npm install consolidate co ...
- 内核态发生非法地址访问是否会panic
https://mp.weixin.qq.com/s?__biz=MzAwMDUwNDgxOA==&mid=2652663676&idx=1&sn=b18ab57322594e ...