防抖&节流
使用的原因
在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于DOM操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃,函数节流和防抖就是解决类似需求应运而生的
节流
预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行,就像水滴攒到一定重量会下落一样
运用场景:
- 窗口调整(resize)
- 页面滚动(scroll)
- 抢购疯狂点击(mousedown)
let throttle = (fn,waitTime) => {
let lastTime = 0;
return function () {
let nowTime = new Date().getTime();
if (nowTime - lastTime >= waitTime) {
fn();//执行的时候注意this指向
lastTime = nowTime;
}
}
}
防抖
函数防抖就是函数需要频繁触发情况时,只有足够的空闲时间,才执行一次。就像公交司机会等人都上车后才出站
运用场景
- 实时搜索(keyup)
- 拖拽(mousemove)
let antiShake = (fn,intervalTime) => {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn()
},intervalTime)
}
}
防抖&节流的更多相关文章
- JS: 防抖节流
防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...
- vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- v-debounce-throttle是一个vue防抖节流指令
v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...
- JavaScript防抖节流函数
1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- js 防抖 节流 JavaScript
实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮:如resize事件,对某些自适应页面调整DOM的渲染:如keyup事件,监听文字输入并调用接口进行模糊匹配等 ...
- 函数防抖节流的理解及在Vue中的应用
防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...
- JS基石之-----防抖节流函数
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...
随机推荐
- scrapy项目1:爬取某培训机构老师信息(spider类)
1.scrapy爬虫的流程,可简单该括为以下4步: 1).新建项目---->scrapy startproject 项目名称(例如:myspider) >>scrapy.cfg为项目 ...
- c#翻页效果
用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...
- wordcloud:让你的词语像云朵一样美
介绍 对文本中出现频率较高的关键词给予视觉化的显示 使用 python import jieba import codecs import wordcloud file = r"C:\U ...
- 用flask进行web开发
经理管理一个餐厅,推出每天都有特色菜的营销模式.他想根据一周中的每一天有一种特色菜. 客人想知道当天的特色菜是什么.另外再添加一个介绍页面.bios路径下,显示餐厅主人,厨师,服务生的简介. pyth ...
- 大哥带的Orchel数据库的注入
0X01 先进行判断 a.jsp?username=SMITH and = 发现单引号闭合 我们尝试构造闭合 存在注入 a.jsp?username=SMITH'='1 正确 a.jsp?user ...
- Floating Point Math
Floating Point Math Your language isn't broken, it's doing floating point math. Computers can only n ...
- 搭建Ambari 2.6.0 tar 解压缩报错
背景:我们使用的方式不是wget 去下载ambari的源码包,而是在windows 的 firefox 下直接下载,将文件存储到本地. 执行 tar -zxvf HDP-2.6.3.0-centos7 ...
- 【每日一包0005】arr-flatten
github地址:https://github.com/ABCDdouyae... arr-flatten 将多维数组展开成一维数组 文档地址:https://www.npmjs.com/packag ...
- sed扩展命令使用
[root@b ~]# cat f.txt inet addr:192.168.0.110 Bcast:192.168.0.255 Mask:255.255.255.0[root@b ~]# cat ...
- 四:flask-URL两种传参方式(路径传参和get传参)
新建一个视图 第一种:路径传参:url/参数:<参数名>,然后再视图函数中接收参数 也可以指定数据类型 string:默认使用此数据类型,接收没有任何斜杠"\/"的文本 ...