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 防抖的更多相关文章

  1. JavaScript防抖节流函数

    1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  2. JavaScript 防抖和节流

    1. 概述 1.1 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...

  3. JavaScript 防抖(debounce)和节流(throttle)

    防抖函数 触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 /** * * @param {*} fn :callback function * @param {* ...

  4. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  5. JavaScript:防抖与节流

    ①防抖: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  7. javaScript函数节流与函数防抖

    javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...

  8. [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北

    网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...

  9. 使用rxjs以及javascript解决前端的防抖和节流

    JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...

随机推荐

  1. vmware虚拟机三种网卡

    vmware虚拟机三种网卡   vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开vmware虚拟机 ...

  2. java练习---1

    //程序员:罗元昊 2017.9.6public class Ap{ public static void main(String[] args){ System.out.println(" ...

  3. 说说Java线程间通信

    序言 正文 [一] Java线程间如何通信? 线程间通信的目标是使线程间能够互相发送信号,包括如下几种方式: 1.通过共享对象通信 线程间发送信号的一个简单方式是在共享对象的变量里设置信号值:线程A在 ...

  4. 第二章 jsp数据交互(一)

    JSP如何处理客户端的请求? 解析:通过jsp内置对象 表单数据被提交到了jsp页面! 什么是JSP内置对象(jsp核心)? Java 内置对象 Java  作用域 解析:jsp内置对象是web容器创 ...

  5. Deque 和Queue

    概述 接口,一个线性结合,支持在集合首尾add , remove , deque 是double  ended queue 的缩写,意味双端队列,接口提供的方法有两种类型,如果失败,一种抛出异常,一种 ...

  6. LeetCode 448. Find All Numbers Disappeared in an Array找到所有数组中消失的元素

    题目 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能 ...

  7. iOS 注释

    1) 参数的注释: UIButton *btnSend;/**< 发送按钮 */ 效果: 2) 方法的注释: type1(无参数): /** table 相关设置 */ -(void)confi ...

  8. C++单继承、多继承情况下的虚函数表分析

    C++的三大特性之一的多态是基于虚函数实现的,而大部分编译器是采用虚函数表来实现虚函数,虚函数表(VTAB)存在于可执行文件的只读数据段中,指向VTAB的虚表指针(VPTR)是包含在类的每一个实例当中 ...

  9. 【原创】JAVA进程突然消失的原因?

    引言 值此七夕佳节,烟哥放弃了无数妹纸的邀约,坐在电脑面前码字,就是为了给读者带来新的知识,这是一件伟大的事业! 好吧,实际情况是没人约.为了化解尴尬,我决定卖力写文章,嗯,一定是我过于屌丝! 好了, ...

  10. DT-06 For AT

    乐鑫官方AT指令固件- 最新1.5.4版本 此固件仅支持AT指令对模块进行操作. 1.DT-06固件的烧录 1.1打开ESP模块下载工具ESPFlashDownloadTool,选择需要下载的固件,填 ...