【前言】

在工作中,我们可能碰到这样的问题:

  • 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了。
  • 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每滚动一下就监听,那样会太过频繁从而占内存,如果再加上其他的业务代码,就卡住了。

所以,这时候,我们就要用到 防抖与节流 了。

那么,讲到 防抖与节流,我们可以顺带探秘下 重绘与回流

说起 重绘与回流,我们就顺带把 浏览器输入 URL 后发生的事情 也关注一下,从而引出 DNSTCP 等知识点,最终串起来构成本文的轮廓,方便 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 的用法》

 
案例2:
<!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函数防抖及应用场景的更多相关文章

  1. 浅谈JS函数节流及应用场景

    说完防抖,下面我们讲讲节流,规矩就不说了,先上代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...

  3. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  4. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  5. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  6. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  7. 浅谈JS面向对象

    浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...

  8. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  9. 浅谈JS严格模式

    浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...

随机推荐

  1. WebAPI的使用

    后台API的代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  2. Linux学习笔记-第19天 结束了。突然感觉配置一个服务好简单的样子

    课程结束了,这本书又过了一遍,感觉学习到了不少的新知识.虽然整个过程老师讲的有点仓促,但回头想想身处于这个知识大爆炸的时代,学习不单要追求知识面宽广,更需要注重学习的效率,某种角度来讲,这也是一种鞭策 ...

  3. Istio修改IngressGateway网络类型

    ingressgateway的默认网络类型是LoadBanlancer,在没有外部负载均衡的情况下可以修改为NodePort. 1.修改 kubectl patch service istio-ing ...

  4. 趣谈Linux操作系统学习笔记:第二十八讲

    一.引子 磁盘→盘片→磁道→扇区(每个 512 字节) ext* 定义文件系统的格式 二.inode 与块的存储 1.块 2.不用给他分配一块连续的空间 我们可以分散成一个个小块进行存放 1.优点 2 ...

  5. C# Winform程序防止多开的方法总结(亲测)

    1.Winform启动的时候,检测是否存在同样的进程名,防止程序多开: static class Program { /// <summary> /// 应用程序的主入口点. /// &l ...

  6. 使用rsync基于ssh免密登陆进行备份或目录同步

    日常工作中有很多的备份工作,rsync是一个很不错的工具,尝试使用基于ssh免密登陆的方式进行备份,测试成功,是可行且方便的方法,撰文记之,以备后用: 1.A主机root用户对B主机root用户做ss ...

  7. Golang面向并发的内存模型

    Import Advanced Go Programming 1.5 面向并发的内存模型 在早期,CPU都是以单核的形式顺序执行机器指令.Go语言的祖先C语言正是这种顺序编程语言的代表.顺序编程语言中 ...

  8. Flink JobManager 和 TaskManager 原理

    转自:https://www.cnblogs.com/nicekk/p/11561836.html 一.概述 Flink 整个系统主要由两个组件组成,分别为 JobManager 和 TaskMana ...

  9. MySQL应用之CROSS JOIN用法简介教程

    目录 2. cross join用法 @ 本博客翻译自两篇博客的: http://www.mysqltutorial.org/mysql-cross-join/ https://www.w3resou ...

  10. 一个有用的排序函数,array_multisort(),下面的一个用法是根据二维数组里的一个字段值的大小,对该二维数组进行重新排序

    从二维数组$cashes中取出一列 'store_id'(二维数组中的每个一维数组都有的字段),按照这个的大小排序,对二维数组$caches里面的一维数组进行重新排序 实际应用如下 想让相同部门的排在 ...