函数节流和函数防抖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 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
随机推荐
- Vue 路由心得总结
一. 嵌套路由 a.主页面, main.vue , 子页面分别为 shouye.vue / liuyan.vue / about.vue , 首先, 在main.vue加入导 ...
- 前序遍历构造已知二叉树(Java)
public BiNode createBiTree() { Scanner input = new Scanner(System.in); int k = input.nextInt(); if(k ...
- Web项目中的 /
如果 / 出现在路径的前面: web.xml中:http://loclalhost:8080/项目名称/ 在项目的根路径下面 jsp中: http://localhost:8080/ ...
- ABP实践(1)-通过官方模板创建ASP.NET Core 2.x版本+vue.js单页面模板-启动运行项目
1,打开ABP官网下载模板页面 2,根据下图选择对应的选项及输入项目名 注:上图验证码下方的选择框打钩表示下载最新稳定版,不打钩表示下载最新版本(有可能是预览版) 3,解压下载的压缩包 解压之后是个a ...
- MySQL之字符集
看unicode编码区从1 - 126就属于传统utf8区,当然utf8mb4也兼容这个区,126行以下就是utf8mb4扩充区 1.utf8与utf8mb4(utf8 most bytes 4) M ...
- Linux centos 推拉、共享、监控的设置的分享
新建四台虚拟机 打开第一台连接shell更改主机名.网卡 backup 1.主机名网卡配置 [root@jytcentos7.6 ~]# hostnamectl set-hostname backup ...
- Microsoft Connect 2018 Summary
https://www.microsoft.com/en-us/connectevent/
- 【Linux】Linux主要目录以及说明
主要目录以及说明: /:根目录,位于Linux文件系统目录结构的顶层,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中. /bin, ...
- Python中的eval(),exec()以及其相关函数
1. eval函数 函数的作用: 计算指定表达式的值.也就是说它要执行的Python代码只能是单个运算表达式(注意eval不支持任意形式的赋值操作),而不能是复杂的代码逻辑,这一点和lambda表达式 ...
- beego框架开发投票网站(1) beego基础之运行逻辑
本文档需结合beego官方文档食用 博主也仅仅是边学边记录,不保证内容的正确性,请当做通俗读物来看待 首先 beego是一个基于go语言的框架 其次 beego是一个mvc框架 框架可以理解为对底层又 ...