JavaScript 防抖
JavaScript 防抖
在前端开发中会遇到一些频繁的事件触发,比如:
window 的 resize、scroll
mousedown、mousemove
keyup、keydown...
防抖的原理就是:你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总的来说,就是要等你触发完事件 n 秒内不再触发事件,我才执行
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>防抖</title>
<style>
#container{width:100%;
height:200px;
line-height:200px;
text-align:center;
color: #fff;
background-color: #444;
font-size: 30px;}
</style>
</head>
<body>
<div id="container"></div>
<script>
var count = 1;
var container = document.getElementById('container');
function getUserAction() {
container.innerHTML = count++;
};
container.onmousemove = getUserAction;
</script>
</body>
</html>
1:
每次次事件触发,都会清除上次事件的定时器,达到连续触发,只执行一次的效果
function debounce(func, wait) {
var timeout;
return function () {
clearTimeout(timeout)
//每次次事件触发,都会清除上次事件的定时器,达到连续触发,只执行一次的效果
timeout = setTimeout(func, wait);
}
}
container.onmousemove = debounce(getUserAction, 1000);
现在随你怎么移动,反正你移动完 1000ms 内不再触发,我才执行事件。看看使用效果:
2.this
如果我们在 getUserAction 函数中 console.log(this),在不使用 debounce 函数的时候,this 指向的的值为:
<div id="container"></div>
但是如果使用我们的 debounce 函数,this 就会指向 Window 对象!
所以我们需要将 this 指向正确的对象
function debounce(func, wait) {
var timeout;
return function () {
var context = this;//保存事件this
clearTimeout(timeout)
timeout = setTimeout(function () {
func.apply(context)//重新绑定this
}, wait);
}
}
3.event 对象
JavaScript 在事件处理函数中会提供事件对象 event,我们修改下 getUserAction 函数:
function getUserAction(e) {
console.log(e);
container.innerHTML = count++;
};
如果我们不使用 debouce 函数,这里会打印 MouseEvent 对象
但是在我们实现的 debounce 函数中,却只会打印 undefined!重新绑定事件对象
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;//获取return 函数的参数
clearTimeout(timeout)
timeout = setTimeout(function () {
func.apply(context, args)//重新调用函数时指定参数
}, wait);
}
}
4.立刻执行
这个时候,接下来思考一个新的需求。
我不希望非要等到事件停止触发后才执行,我希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行。,那我们加个 immediate 参数判断是否是立刻执行。
事件发生后,函数立即执行
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);//
if (immediate) {//立即执行逻辑
//--------------构成是是否判断----------------
var callNow = !timeout;
timeout = setTimeout(function () {
timeout = null;//连续事件触发,下次能执行时间会一致往后移wait,除非等待时间结束后再触发
}, wait)
//--------------构成是是否判断end----------------
if (callNow) func.apply(context, args)//是第一次触发
}
else {//非立即执行
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
5.返回值
此时注意一点,就是 getUserAction 函数可能是有返回值的,所以我们也要返回函数的执行结果,但是当 immediate 为 false 的时候,因为使用了 setTimeout ,我们将 func.apply(context, args) 的返回值赋给变量,最后再 return 的时候,值将会一直是 undefined,所以我们只在 immediate 为 true 的时候返回函数的执行结果。
function debounce(func, wait, immediate) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) result = func.apply(context, args)//只能立即执行才能有返回值
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
return result;//在这里返回,非立即执行会报undefined
}
}
JavaScript 防抖的更多相关文章
- JavaScript防抖节流函数
1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- JavaScript 防抖和节流
1. 概述 1.1 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...
- JavaScript 防抖(debounce)和节流(throttle)
防抖函数 触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 /** * * @param {*} fn :callback function * @param {* ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- JavaScript:防抖与节流
①防抖: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北
网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...
- 使用rxjs以及javascript解决前端的防抖和节流
JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...
随机推荐
- C++ 过滤出字符串的中文(GBK,UTF-8)
最近在处理游戏敏感词之类的东西,为了加强屏蔽处理,所以需要过滤掉字符串中的除汉字之外的是其他东西如数字,符号,英文字母等. 首先我查阅资料并写了个函数: 示例:返回输入字符串中汉字的个数: std:: ...
- java往文本文件中写入信息并修改
题目要求: 1.可以往一个文本文档中写入员工信息:name,id和详情 2.可以更改name package FanCQ.Xue.practice; import java.io.*;import j ...
- 关于JS、JQ首行首列固定展示
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行 JQ /** * ...
- Pow共识算法
谈到哈希算法,每个程序员都不陌生,但是谈到比特币共识算法PoW,如果没有接触过的技术人员可能觉得应该会很复杂,毕竟全球的比特币节点数量如此庞大,达成共识的算法应该不会很简单.但其实如果你已掌握哈希算法 ...
- hive分桶表bucketed table分桶字段选择与个数确定
为什么分桶 (1)获得更高的查询处理效率.桶为表加上了额外的结构,Hive 在处理有些查询时能利用这个结构.具体而言,连接两个在(包含连接列的)相同列上划分了桶的表,可以使用 Map 端连接 (Map ...
- Robotframework获取移动端toast问题
背景: 在做移动端自动化测试的时候,经常会遇到一个问题就是获取toast提示问题,如果需要解决这个问题需要重新处理,不能按照正常的逻辑,使用robotframework自带的关键字进行获取,需要重新考 ...
- RBF神经网络
RBF神经网络 RBF神经网络通常只有三层,即输入层.中间层和输出层.其中中间层主要计算输入x和样本矢量c(记忆样本)之间的欧式距离的Radial Basis Function (RBF)的值,输出层 ...
- Why do I write a blog
I believe the most beautiful and elegant answer to this question is from Churchill. "On a peace ...
- 逆向破解之160个CrackMe —— 002-003
CrackMe —— 002 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...
- 802.11学习笔记1-WIFI参数含义
研究下wifi参数的含义 #The word of "Default" must not be removed Default CountryRegion= CountryRegi ...