浅谈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也把拖放纳入了标准.但考虑 ...
随机推荐
- doPost()和doGet()方法的区别？
GET和POST请求都是http的请求方式,用户通过不同的http的请求方式完成对资源(url)的不同操作.GET,POST,PUT,DELETE就对应着对这个资源的查 ,改 ,增 ,删 4个操作,具 ...
- 使用hexo、github Pages搭建博客
1. 安装node 如果本机已经有node,为避免安装出现问题,建议先升级到最新版.参考:https://juejin.im/post/5b9739d1e51d450e9f66ee3b 2. 安装he ...
- Prism_ViewModelLocator(5)
ViewModelLocator ViewModelLocator用于绑定视图的DataContext,以使用标准命名约定的一个ViewModel的实例. Prism ViewModelLocator ...
- MySQL——my.cnf参数设置说明
以下为个人总结的MySQL配置文件参数说明,如有错误,烦请大佬们留言指正,本人将第一时间修改.2019-12-10 12:32:08 [mysqld] server- # Mysql唯一标识,一个集群 ...
- C语言 复习函数
什么是函数呢? 首先函数是在完成特定任务的程序代码中,拥有自己独立的单元. 举个例子 “你可以拿本书吗?” ”你可以拿本语文书吗?“ “你可以拿苹果吗?”..... 如果要是放到程序里面估计要重复很多 ...
- OS X 下 OpenGL 4.x 环境配置
配置: OS X 10.10 + CMake 3.2.2 + GLFW 3.1.1 + OpenGL 4.1 + Xcode 6.0 本文主要介绍如何在 OS X 系统下进行环境配置,使得 Xcode ...
- SpringCloud gateway （史上最全）
疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之 -25[ 博客园 总入口 ] 前言 ### 前言 疯狂创客圈(笔者尼恩创建的高并发研习社群)Springcloud 高并发系列文章,将为大家 ...
- 关于JVM、JRE、Jdk三者的定义与联系
许多初学者对于java中的JVM.JRE.JDK三者的定义与联系有些模糊,接下来我就根据我的理解来为各位解答一下,希望能帮到正在努力的你们. JVM JVM是Java Virtual Machin ...
- SpringCloud微服务(07)：Zipkin组件，实现请求链路追踪
本文源码:GitHub·点这里 || GitEE·点这里 一.链路追踪简介 1.Sleuth组件简介 Sleuth是SpringCloud微服务系统中的一个组件,实现了链路追踪解决方案.可以定位一个请 ...
- maven配置阿里云仓库镜像
全局配置 修改settting文件 在mirrors标签下添加子节点. <mirror> <id>nexus-aliyun</id> <mirrorOf> ...