浅谈JS函数节流及应用场景
说完防抖，下面我们讲讲节流，规矩就不说了，先上代码：
<!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="throttle">点我节流！</button> <script>
window.onload = function() {
// 1、获取按钮，绑定点击事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle));
} // 2、节流函数体
function throttle(fn) {
// 4、通过闭包保存一个标记
let canRun = true;
return function() {
// 5、在函数开头判断标志是否为 true，不为 true 则中断函数
if(!canRun) {
return;
}
// 6、将 canRun 设置为 false，防止执行之前再被执行
canRun = false;
// 7、定时器
setTimeout( () => {
fn.call(this, arguments);
// 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
canRun = true;
}, );
};
} // 3、需要节流的事件
function sayThrottle() {
console.log("节流成功！");
} </script>
</body>
</html>
很好，看完代码的小伙伴应该大致清楚是怎么回事了，下面我们看 GIF 实现：
看完代码和 GIF 实现，我们可以明白，节流即是：
- 节流：指定时间间隔内只会执行一次任务。
那么，节流在工作中的应用？
- 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。
- 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。
这样，在某些特定的工作场景，我们就可以使用防抖与节流来减少不必要的损耗。
那么问题来了，假设面试官听到你这句话，是不是会接着问一句：“为什么说上面的场景不节制会造成过多损耗呢？”
OK，这就涉及到浏览器渲染页面的机制了……
案例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',throttle(getInputValue),false);
/* 节流函数 */
function throttle(fn){
/*通过闭包保存一个标记*/
let timer = true;
return function(){
/*在函数开头判断标志是否为 true，不为 true 则中断函数*/
if(!timer){
return;
}
/*将 timer 设置为 false，防止执行之前再被执行*/
timer = false;
/* 定时器 */
setTimeout(()=>{
fn.call(this,arguments)
/*执行完事件（比如调用完接口）之后，重新将这个标志设置为 true*/
timer = true;
},)
}
}
/* 调用获取输入值 */
function getInputValue(){
console.dir(this.value)
}
</script>
</body>
</html>
.
浅谈JS函数节流及应用场景的更多相关文章
- 浅谈JS函数防抖及应用场景
[前言] 在工作中,我们可能碰到这样的问题: 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了. 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈 js 语句块与标签
原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...
- 浅谈JS面向对象
浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
随机推荐
- 一泡尿的时间，快速读懂QUIC协议
1.TCP协议到底怎么了? 现时的互联网应用中,Web平台(准确地说是基于HTTP及其延伸协议的客户端/服务器应用)的数据传输都基于 TCP 协议. 但TCP 协议在创建连接之前需要进行三次握手(如下 ...
- C# 网络编程之简易聊天示例
还记得刚刚开始接触编程开发时,傻傻的将网站开发和网络编程混为一谈,常常因分不清楚而引为笑柄.后来勉强分清楚,又因为各种各样的协议端口之类的名词而倍感神秘,所以为了揭开网络编程的神秘面纱,本文尝试以一个 ...
- 对python函数后面有多个括号的理解？
一般而言,函数后面只有一个括号.如果看见括号后还有一个括号,说明第一个函数返回了一个函数,如果后面还有括号,说明前面那个也返回了一个函数.以此类推. 比如fun()() def fun(): prin ...
- mysql的锁机制详解
这段时间一直在学习mysql数据库.项目组一直用的是oracle,所以对mysql的了解也不深.本文主要是对mysql锁的总结. Mysql的锁主要分为3大类: 表级锁:存储引擎为Myisam.锁住整 ...
- JVM常用参数详解
JVM整个堆大小=年轻代大小 + 年老代大小 + 持久代大小,在JDK1.8及之后的版本由于永久代被元空间替代,所以jdk1.8中的堆=年轻代大小 + 年老代大小.本文使用的是JDK1.8 1.堆 ...
- Java生鲜电商平台-SpringCloud微服务架构中分布式事务解决方案
Java生鲜电商平台-SpringCloud微服务架构中分布式事务解决方案 说明:Java生鲜电商平台中由于采用了微服务架构进行业务的处理,买家,卖家,配送,销售,供应商等进行服务化,但是不可避免存在 ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- 线程join方法详解
执行逻辑:在当前代码块(比如main方法)中的线程A执行了join方法, 那么当代码块(main)执行到join方法时,会停止继续向下执行,一直到线程A执行完毕, main方法才会继续向下执行. 代码 ...
- MyBatis映射文件 相关操作
一.MyBatis映射文件 1.简介 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行 ...
- How do I unmute my Lenovo laptop?
If the FN key does have a green light just press and hold down the FN button on the bottom left of t ...