JavaScript小面试~节流
节流，当用户发出多次请求时，需要对事件进行限制，不要让事件过多触发。场景：在用户浏览页面的时候，用户拼命滚动屏幕时，控制页面滚动的事件会多次触发，会导致网络阻塞或者出现渲染差。此时需要对其进行约束。无论用户如何操作，都忽视用户操作，只有当时间到了之后，监视到用户还在触发事件，才触发事件。
流程：触发事件，执行任务设置时间间隔>>>>在时间间隔内触发则取消任务>>>>在时间间隔后触发事件>>>则回到第一步。
我们设置点击事件，用户点击次数过多的时候，会导致事件触发过多，我们使用节流来实现在规定时间后才能再次触发事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text{
height: 200px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='text' ></div>
</body>
<script>
function colors(){
let a =Math.floor(Math.random()*255);
let b =Math.floor(Math.random()*255);
let c =Math.floor(Math.random()*255);
document.getElementById('text').style.background=`rgb(${a},${b},${c})`
}
function throttle(func,timers){
let timer
return ()=>{
if(timer){
return;
}
timer=setTimeout(()=>{
func()
timer=null
},timers)
}
}
document.getElementById('text').addEventListener('click',throttle(colors,2000))
</script>
</html>代码的核心思想：当点击第一次事件触发时，timer为null，执行定时器，在这两秒内事件再次被触发，timer有值，则走if内，不执行函数，两秒后触发点击事件，timer已被清空，则执行定时器内的函数，再次清空timer，以此往复执行。。。。。
节流的核心思想：在规定时间内只会执行一次，
JavaScript小面试~节流的更多相关文章
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- javascript小括号、中括号、大括号学习总结
作为一名编程人员,和括号打交道是必不可少的.你可知道在不同的上下文中,括号的作用是不一样的,今天就让我们简单总结下javascript小括号.中括号.大括号的用法. 总的来说,JavaScript中小 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- 8 张脑图入门 JavaScript - 基础面试不倒
8 张脑图入门 JavaScript - 基础面试不倒 转载请注明出处 第一:JavaScript 的变量 第二:JavaScript 运算符 第三:JavaScript 数组 第四:JavaScri ...
- JavaScript 小实例 - 表单输入内容检测，对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
随机推荐
- django多表关联实战
定义模型类: from django.db import models from django.contrib.auth.models import User ''' ---------- Djang ...
- CSS——选择器的优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.样式表中的特殊性描述了不同规则的相对权重. !important > 行内样式>ID选择器 > 类选择器 > 标签 ...
- Vue——安装
Vue.js 设计的初衷就包括可以被渐进式地采用.这意味着它可以根据需求以多种方式集成到一个项目中. 将 Vue.js 添加到项目中主要有四种方式: 1.在页面上以 CDN 包的形式导入. <s ...
- nginx四层负载nginx七层负载,nginx基于nginx-sticky会话保持.
1. nginx负载均衡实战 nginx提供了 4 7层负载均衡. 可根据业务需求选择不同负载均衡策略. 1.1.1 nginx四层负载均衡[网络层TCP负载] 不支持动静分离,但支持 http my ...
- NumPy 均匀分布模拟及 Seaborn 可视化教程
均匀分布 简介 均匀分布是一种连续概率分布,表示在指定范围内的所有事件具有相等的发生概率.它常用于模拟随机事件,例如生成随机数或选择随机样本. 参数 均匀分布用两个参数来定义: a:下限,表示分布的最 ...
- 《最新出炉》系列入门篇-Python+Playwright自动化测试-50-滚动条操作
1.简介 有些页面的内容不是打开页面时直接加载的,需要我们滚动页面,直到页面的位置显示在屏幕上时,才会去请求服务器,加载相关的内容,这就是我们常说的懒加载.还有就是在日常工作和学习中,经常会遇到我们的 ...
- 8.21考试总结(NOIP模拟45)[打表·蛇·购物·ants]
有型的东西终究会消逝,不过--终于,这份回忆还是永远不朽的- 前言 这次考试暴露出来了不少问题. 比如答题策略策略不当导致 T2 的 65pts 暴力根本没有打. 知识遗忘太快不牢固,T4 是之前的一 ...
- vue带有参数的路由跳转 动态路由
先定义好路由在router文件下面创建一个新的文件夹里面写上自己定义的路由 export default { path: '/detail/:id', component: () => ...
- 已经有 Prometheus 了，还需要夜莺？
谈起当下监控,Prometheus 无疑是最火的项目,如果只是监控机器.网络设备,Zabbix 尚可一战,如果既要监控设备又要监控应用程序.Kubernetes 等基础设施,Prometheus 就是 ...
- 《Android开发卷——自定义日期选择器（三）》
继 <Android开发卷--自定义日期选择器(一)>:http://blog.csdn.net/chillax_li/article/details/19047 ...