javascript --- 防抖与节流
先做一个监听鼠标移动的base:
<style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;}
</style>
<div id="content"></div>
<script>let content = document.getElementById('content');let num = 0;function count () {content.innerHTML = num++};content.onmousemove = count;
</script>
// 鼠标在灰色方块内移动时,数字会疯狂的涨.
防抖(debounce): 是指触发事件在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间
// 非立即执行: 本例中是指,鼠标移动,然后再某个地方停留s秒后,才执行函数
function debounce(func, wait) {let timeout;return function () {let self = this;let args = arguments;if (timeout ) clearTimeout(timeout);timeout = setTimeout( () => {func.apply(self, args);}, wait);}
}
content.onmousemove = debounce( count, 1*1000);// 立即执行: 立即执行,然后等待s秒(中途若移动则重新计算)后,然后立即执行,再等待s秒
function debounce(func, wait) {let timeout;return function () {let self = this;let args = arguments;if ( timeout ) clearTimeout( timeout ) ;let callNow = !timeout;timeout = setTimeout( () => {timeout = null;}, wait)if ( callNow ) func.apply(self, args);}
}// 混合防抖(immediate为真代表立即执行)
function debounce(func, wait, immediate=false) {let timeout;return function () {let self = this;let args = arguments;if( timeout ) clearTimeout( timeout );if( immediate) { // 立即执行let callNow = !timeout;timeout = setTimeout ( () => {timeout = null;}, wait)if ( callNow ) func.apply(self, args);} else {timeout = setTimeout( () => {fn.apply(self, args);}, wait);}}
}
节流(throttle): 所谓节流,就是指连续触发事件,但是在n秒内该事件只处理一次
function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();let self = this;let args = arguments;if (now - previous > wait) {func.apply(context, args);previous = now;}}
}
参考 函数防抖和节流
javascript --- 防抖与节流相关推荐
- JavaScript防抖与节流
JavaScript防抖与节流 1 为什么需要防抖和节流 2 防抖与节流原理 3 实现一个防抖函数 3.1 初步实现 3.2 this问题 3.3 event问题 3.4 立即执行 3.5 返回值问题 ...
- 前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
- Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
- javascript --- 防抖与节流
说明 源码 1. 防抖与节流 1.1 防抖 防抖: 触发事件后,在n秒内函数只执行一次 记忆: 你手比较抖,不小心按了按钮2下-你只希望它只执行一次.且按第二次结束时间算-这就用到了防抖技术 1.2 ...
- JavaScript防抖与节流的具体实现及使用场景
文章目录 前言 一.什么是防抖和节流? 二.防抖 简单介绍 图解 代码如下(示例): 二.节流 简单介绍 图解 代码如下(示例): 三.防抖与节流的使用场景 总结 前言 最近遇到注册登陆按钮需要添加防 ...
- 全网最详细JavaScript防抖、节流函数解析
防抖与节流 防抖与节流 防抖 作用与简介 实现 核心与细节 应用场景 节流 作用与简介 实现 核心与细节 应用场景 防抖与节流 防抖 作用与简介 在一个周期T内,如果重复的进行某种响应操作,在不设置防 ...
- JavaScript 防抖和节流的实现
一.防抖 1. 认识防抖 防抖:在第一次触发事件时,不立即执行函数,而是给出一个限定值,比如200ms,然后: 如果在200ms内没有再次触发事件,那么执行函数 如果在200ms内再次触发函数,那么当 ...
- 前端性能优化经典:javascript防抖节流
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端的一些性能优化,js防抖节流,它是项目比较常见的性能优化方案,也是面试中常遇到的问题.希望下面文章对大家有所帮助. 我们在 ...
- mysql闭包的概念_彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
最新文章
- vb.net如何查询电脑麦克风收到声音_如何正确使用苹果电脑?
- SVM和感知机的区别(转载+自己笔记)
- java changestr,java change
- vue-cli webpack配置分析 - chenBright - SegmentFault 思否
- 【AC自动机】单词(luogu 3966/ybtoj AC自动机-2)
- python制作系统程序与html交互_python+html语音人物交互_flask后台与前端(html)交互的两种方法...
- [css] 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速?
- PAT甲题题解-1128. N Queens Puzzle (20)-做了一个假的n皇后问题
- @Autowired和构造方法执行的顺序解析
- 最强NLP模型BERT可视化学习
- 忘记mysql数据库连接密码
- Python图像处理(1)
- java集合框架实验心得_关于Java集合框架的总结
- JAVA velocity语法讲解
- 树莓派 40pin IO引脚测试
- 武大计算机专硕和学硕,专硕与学硕,到底有什么区别?
- jpg照片太大怎么压缩?三步轻松搞定
- 一个程序员应该怎样去学习和掌握计算机英语
- 基于Python的OpenCV+TensorFlow+Keras人脸识别实现
- OpenStack社区周报:Neutron网络之负载均衡,设计OpenStack云时需要避开的十个误区...