JavaScript 函数节流和函数去抖
概念
函数防抖(debounce)
当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间
函数节流(throttle)
预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期
函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
函数防抖(debounce)
如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。
function debounce(fn,wait){
var timer = null;
return function(){
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
},wait)
}
} function log(){
console.log(1)
} window.addEventListener('scroll', debounce(log, 1000));
函数节流(throttle)
保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行。
function throttle(fn,wait,time){
var previous = null; //记录上一次运行的时间
var timer = null; return function(){
var now = +new Date(); if(!previous) previous = now;
//当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次
if(now - previous > time){
clearTimeout(timer);
fn();
previous = now;// 执行函数后,马上记录当前时间
}else{
clearTimeout(timer);
timer = setTimeout(function(){
fn();
},wait);
}
}
}
function log(){
console.log(1)
}
移动端开发的兼容问题(自我总结篇)
浏览器常见兼容问题以及解决办法
JavaScript 函数节流和函数去抖的更多相关文章
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 节流(Throttling)和去抖(Debouncing)详解
这篇文章的作者是 David Corbacho,伦敦的一名前端开发工程师.之前我们有一篇关于”节流”和”去抖”的文章:The Difference Between Throttling and Deb ...
- JavaScript函数节流与函数去抖
介绍 首先解释一下这两个概念: 函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次函数执行后过了规定的时间间隔,才能进行下一次该函数的调用. 函数去抖(debounce ...
随机推荐
- Linux之【GNU】、【GPL】、【linux系统组成】
GNU,什么是GNU GNU全称:GNU's not unix GNU的重要组件(Emacs,gcc,bash,gawk等)加上自己的内核构成了GNU自己的系统--->没用 现在linux中的一 ...
- Visual Studio 2012 Ultimate旗舰版下载地址与序列号
(为了方便个人使用转的的别的帖子的内容,原文链接http://wenku.baidu.com/link?url=acL08J8bTNQ4S5Sd3n3oLN5KJTtrfe8hHuP8aUrNscKN ...
- PyQt(Python+Qt)学习随笔
老猿Python博文目录 老猿Python博客地址 PyQt学习随笔 PyQt(Python+Qt)帮助文档官网及文档下载 PyQt(Python+Qt)学习随笔:PyQt帮助文档导入assistan ...
- 使用kali生成远控payload
kali linux中的metasploit框架是优秀的渗透框架之一,今天记载一下使用kali生成windows远控木马的过程 生成payload使用的工具是MSFVenom,我们输入msfvenom ...
- 攻防世界 web进阶区 ics-06
攻防世界 ics-06 涉及知识点: (1)php://filter协议 (2)php中preg_replace()函数的漏洞 解析: 进入题目的界面,一通乱点点出了唯一一个可以进入的界面. 观察ur ...
- 3、pytorch实现最基础的MLP网络
%matplotlib inline import numpy as np import torch from torch import nn import matplotlib.pyplot as ...
- Hello!OA!Hello!工作流!寻找OA和工作流的旅途记录
最近新到了一家公司,这家公司做的人力资源管理,需要一个OA系统,所以就让我做一个选型,经过我2周时间的筛选,试用,沟通,测试,最终确定了几款,这个艰辛的路程,在这里记录一下~ 寻找OA的路程----- ...
- 团队作业4-Day2
团队作业4-Day2 项目git地址 1. 站立式会议 2. 项目燃尽图 3. 适当的项目截图(部分) 4. 代码/文档签入记录(部分) 5. 每人每日总结 吴梓华:今日进行了小程序与网页代码编写的区 ...
- 数组编程题(github每日一题)
/** * 随机生成一个长度为 10 的整数类型的数组,例如 [2, 10, 3, 4, 5, 11, 10, 11, 20], * 将其排列成一个新数组,要求新数组形式如下,例如 [[2, 3, 4 ...
- JavaScript异步编程的四种方法
1.回调函数 f1(f2); 回调函数是异步编程的基本方法.其优点是易编写.易理解和易部署:缺点是不利于代码的阅读和维护,各个部分之间高度耦合 (Coupling),流程比较混乱,而且每个任务只能指定 ...