函数节流和函数防抖JavaScript实现
函数节流
function throttle(fn, delay = 1000, immediate = true) {
let Running = false;
return function () {
if (Running) {
return;
}
Running = true;
if(immediate === false){
fn();
}
setTimeout(function () {
if(immediate){
fn();
}
Running = false;
}, delay);
}
}
function OnClick() {
console.log('Clicked!');
}
let clicked = throttle(OnClick, 1000);
用法
function OnClick() {
console.log('Clicked!');
}
let clicked = throttle(OnClick, 1000);
clicked();
//'Clicked!'
clicked();
clicked();
函数防抖
function debounce(fn, delay = 1000) {
let timer = false;
return function () {
clearTimeout(timer);
timer = setTimeout(function () {
fn();
}, delay);
}
}
用法
function OnClick(){
console.log('Clicked!');
}
let clicked = debounce(OnClick,1000);
clicked();
clicked();
clicked();
//'Clicked!'
函数节流和函数防抖JavaScript实现的更多相关文章
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- 函数节流throttle和防抖debounce
throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
随机推荐
- 分布式存储ceph——(3)ceph常用命令
1.查看ceph集群配置信息 1 ceph daemon /var/run/ceph/ceph-mon.$(hostname -s).asok config show 2.在部署节点修改了ceph ...
- 我的工具:Db SQL Monitor
SQL Monitor 是一款界面简洁.绿色小巧的sql活动监视器,它能够帮助用户对 SQL Server 运行进程和Job进行实时监视,您可以查看当前执行的SQL/命令并终止. 工具下载地址:htt ...
- elk部署之前注意事项
注意事项: 1.不能使用root用户登录,需要是用root 之外的用户登录到系统. 2.centos系统 运行内存不能小于2G,若低于2G需要修改jvm. vi {jvm_home}/config/ ...
- VScode插件以及配置
Auto Rename Tag —— 自动同步修改标签 AutoFileName —— 自动补全路径提示 background —— 一个萌萌的插件,可以自己设置vsc的背景图 Bootstrap 3 ...
- synchronized和lock有什么区别?
一.原始构成 synchronized是关键字属于JVM层面,monitorenter(底层是通过monitor对象来完成,其实wait/notify等方法也依赖monitor对象只有在同步代码块和同 ...
- ionic3隐藏子页面的tabs和配置返回按钮
在app.modlues.ts文件中修改 imports: [ BrowserModule, IonicModule.forRoot(MyApp, { tabsHideOnSubPages: 'tru ...
- HTML一
什么是前端: 前端,也称web前端对于网站来说,通常是指网站的前台部分,通俗点就是用户可以看到的部分, 浏览器.APP.应用程序的界面展现和用户交互就是前端 前端要学习那些技术:html+css+ja ...
- MT【325】垂心的向量形式
设$H$为垂心,且$3\overrightarrow{HA}+4\overrightarrow {HB}+5\overrightarrow {HC}=\overrightarrow 0$,则$\cos ...
- 「NOI2013」小 Q 的修炼 解题报告
「NOI2013」小 Q 的修炼 第一次完整的做出一个提答,花了半个晚上+一个上午+半个下午 总体来说太慢了 对于此题,我认为的难点是观察数据并猜测性质和读入操作 我隔一会就思考这个sb字符串读起来怎 ...
- [pip]upgrade outdated pip package on windows / 在windows上更新所有过时的pip包
首先更新pip自身: python -m pip install -U pip 查询过期包: pip list --outdated --format=columns Package Version ...