节流、防抖
时间:2021-07-28
本文章向大家介绍节流、防抖,主要包括节流、防抖使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
节流:
让事件函数隔一段时间触发一次。(应用场景:比如onscroll等高频率触发的事件中)
// 函数节流
var canRun = true;
var timer = null;
document.onscroll = function () {
if (!canRun) return; // 判断是否已空闲,如果在执行中,则直接return
canRun = false;
timer = setTimeout(function () {
console.log("函数节流");
canRun = true;
clearTimeout(tiemr);
}, 300);
};
//函数节流的封装使用
function throttling(fn, interval) {
let canRun = true;
let timer = null;
return function () {
let self = this,
args = arguments;
if (!canRun) return;
canRun = false;
timer = setTimeout(function () {
canRun = true;
fn.apply(self, args);
clearTimeout(timer);
}, interval);
};
};
document.onscroll = throttling(() => {
console.log("函数节流");
}, 300);
防抖:
只执行最一次触发的函数。在一定时间内重复触发,之前的函数不被执行,只执行最后一次触发的函数。(应用场景:比如在输入账号密码的时候,不需要每输入一个字符就验证一下是否正确,当全部输入完成之后,再去匹配验证)
// 函数防抖
var timer = false;
document.onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
//防抖函数的封装使用
function debounce(fn,delay) {
let timer = null;
return function () {
let self = this,
args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(self,args);
},delay);
}
}
window.onscroll = debounce(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
},200)
原文地址:https://www.cnblogs.com/MrZhujl/p/15070973.html
- 调用CodeSmith类库实现代码生成(含源码)
- 1分钟生成Net对象的注释
- Android Studio之gradle的配置与介绍
- MLlib中的随机森林和提升方法
- android JNI调用机制
- Android开发小窍门通过泛型简化findViewById类型转换
- lodash源码分析之缓存使用方式的进一步封装
- Android LruCache技术原理
- RecyclerView 必知必会
- AndFix使用感想
- iOS GPUImage源码解读(一)
- Android 几种网络请求的区别与联系
- 构建基于JAVA的朴素贝叶斯文本分类器
- Spring Cloud构建微服务架构:服务网关(基础)【Dalston版】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 机器人软件中间层 yarp-Yet Another Robot Platforms
- 3分钟短文:Laravel写个命令行,你就是下一个Geek!
- Android开发多年每天Crud不清楚自己的技术?来刷刷大厂的高端技术面试题就知道了
- MySQL案例:count(*)效率优化
- MUI进行APP混合开发实现下拉刷新和上拉加载 原创
- Android 给控件添加边框阴影效果
- 详解Android Selinux 权限及问题
- Android图片采样缩放功能实例代码
- Android开发中使用Intent打开第三方应用及验证可用性的方法详解
- Android 7.0开发获取存储设备信息的方法
- Android中默认系统的声音/大小修改和配置详解
- Android开发中计算器的sin、cos及tan值计算问题分析
- Android开发实现绘制淘宝收益图折线效果示例
- Android自定义View实现搜索框(SearchView)功能
- android 监听SD卡文件变化的实现代码