函数防抖
时间:2021-07-15
本文章向大家介绍函数防抖,主要包括函数防抖使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!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>
*{
margin: 0;
padding: 0;
}
html,body{
height: 300%;
/* background:-webkit-linear-gradient(top left,lightblue,lightgreen,orange ); */
background: #fff;
}
#submit{
margin: 50px;
}
</style>
</head>
<body>
<button id="submit">提交</button>
<script>
/**
* (防抖) 对于频繁触发某个操作 只识别一次
* func 执行函数
* wait number 设置频繁操作的时间
* innediate boolean 默认多次操作,识别最后一次操作
*
* @return
* 可以被调用的 函数
* */
function debounce(func,wait = 300,innediate = false){
let timer = null;
return function anoymous(...params){
let now = innediate && !timer;
clearTimeout(timer); // 每次点击之前都把定时器 清除
// 重新设置定时器
timer = setTimeout(() => {
// 设置为初始状态
timer = null;
!innediate ? func.call(this,...params) : null;
},wait);
// 如果是立即执行
now ? func.call(this,...params) : null;
}
}
function handle(){
// 设置定时器
console.log('ok');
}
// submit.onclick = handle;
submit.onclick = debounce(handle,500,true)
</script>
</body>
</html>
我是Eric,手机号是13522679763
原文地址:https://www.cnblogs.com/eric-share/p/15015858.html
- [Cake] 0.C#Make自动化构建-简介
- [认证授权] 3.基于OAuth2的认证(译)
- [Asp.Net Core] 1. IIS中的 Asp.Net Core 和 dotnet watch
- kafka数据迁移实践
- HDFS 2.x 磁盘间数据均衡的一种可行办法
- Batik渲染png图片异常的bug修复全程记录
- Web应用服务器安全:攻击、防护与检测
- 基于Go Packet实现网络数据包的捕获与分析
- 动态追踪技术(四):基于 Linux bcc/BPF 实现 Go 程序动态追踪
- Hive 时间转换函数使用心得
- Flume-Hbase-Sink针对不同版本flume与HBase的适配研究与经验总结
- 利用Flume 汇入数据到HBase:Flume-hbase-sink 使用方法详解
- 浅谈保证软件工程质量的一些心得体会
- 基于ELK的nginx-qps监控解决方案
- 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 数组属性和方法
- Android滚动条广告实现代码示例
- Android使用Recyclerview实现图片水平自动循环滚动效果
- Android selector的实例详解
- Android底部弹窗的实现示例代码
- Android编程实现自定义渐变颜色效果详解
- ES11屡试不爽的新特性,你用上了几个?
- Android设计模式之策略模式详解
- Android实现类似iOS风格的对话框实例代码
- Android 给图片加上水印的示例代码(支持logo+文字)
- Android studio 下JNI编程实例并生成so库的实现代码
- Android实现简单时钟View的方法
- Android编程之创建自己的内容提供器实现方法
- Android自定义View圆形和拖动圆、跟随手指拖动效果
- Android开发之OkHttpUtils的具体使用方法
- Xshell5连接虚拟机中的Linux的方法以及失败原因解决