场景说明:一般我们在前端页面中会给元素绑定click、scroll、onmousemove、resize等事件,这些事件的执行函数如果是去发请求获取数据的话,我们无意识的连续点击或者连续滚动会给服务器带来很大的压力,因此我们需要在连续触发事件的时候设定每隔一段时间再去执行事件函数,这就是防抖和节流出现的背景。

例如:

<div id="content" style="height:150px;background-color:#ccc;"></div>
let content = document.getElementById('content');

function fetchData(){
console.log('我是测试数据');
} content.onmousemove = fetchData();

  以上代码为div元素绑定了onmousemove事件,当鼠标经过div在其上移动时,会连续触发事件,假设事件执行函数需要去请求数据,则会一直发起请求,造成不必要的服务器压力。

1、防抖

概念:指出发时间后在n秒内只能执行一次,若在n秒内又触发了事件,则会重新计算函数执行时间

防抖函数分为立即执行版和非立即执行版

(1)立即执行版

  立即执行即触发事件后函数立即执行,然后在n秒内不能触发事件才能继续执行函数的效果,假设在n秒内一直触发事件则函数永远不会执行直到停止触发n秒之后,实现如下:

function debounce(func,wait){
let timer;
return function(){
let context = this;
let args = arguments;
if(timer) clearTimeout(timer);
let callNow = !timer; //记录计时器是否结束
timer = setTimeout(()=>{
time = null;
},wait);
if(callNow){
func.apply(context,args);
}
}
}
context.onmouseover = debounce(fetchData,1000);

(2)非立即执行版

  非立即执行即触发事件之后函数不会立即执行,而是在n秒之后执行,如果在n秒内又触发了事件,则会重新计算函数的执行时间。实现如下:

function debounce(func,wait){
  let timer;
  return function(){
    let contex = this;
    let args = arguments;
    if(timer) clearTimeout(timer);
    timer = setTimeout(()=>{
      func.apply(contex,arguments);
    },wait)
  }
}
context.onmousemove = debounce(fetchData,1000)

  

 

2、节流

  概念:指连续触发的事件在n秒内只能执行一次

  节流也有两种实现方式,一种是利用时间戳,一种是利用定时器。

  (1)时间戳

function throttle(func,wait){
  let last = 0;//上次触发时间戳
  return function(){
    let contex = this;
    let args = arguments;
    let now = +new Date(); //当前时间戳
    if(now - last>wait){ //时间间隔大于wait时执行
      last = now;
      func.apply(context,args);
    }
  } } 
 

  (2)定时器

function throttle(func,wait){
  let timer;
  return function(){
    let context = this;
    let args = arguments;
    if(!timer){
      timer = setTimeout(()=>{
        timer = null;
        func.apply(context,args)
      },wait)
    }
  } }

  

防抖(debounce)和节流(throttle)的更多相关文章

  1. 防抖debounce和节流throttle

    大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...

  2. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

  3. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  4. Java版的防抖(debounce)和节流(throttle)

    概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时. 防抖,即如果短时间内大量触发同一事件,都会 ...

  5. js 防抖 debounce 与 节流 throttle

    debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...

  6. 防抖(Debounce)与节流( throttle)区别

    http://www.cnblogs.com/ShadowLoki/p/3712048.html http://blog.csdn.net/tina_ttl/article/details/51830 ...

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

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

  8. C#.Net下的防抖-Debounce和节流阀-Throttle功能实现

    C#下的防抖-Debounce.节流阀-Throttle功能实现 防抖-Debounce 连续的多次调用,只有在调用停止之后的一段时间内不再调用,然后才执行一次处理过程. 节流阀-Throttle 连 ...

  9. [JavaScript] 函数节流(throttle)和函数防抖(debounce)

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...

  10. “浅入浅出”函数防抖(debounce)与节流(throttle)

    函数防抖与节流是日常开发中经常用到的技巧,也是前端面试中的常客,但是发现自己工作一年多了,要么直接复用已有的代码或工具,要么抄袭<JS高级程序设计>书中所述"函数节流" ...

随机推荐

  1. Spring 注解编程之 AnnotationMetadata

    在上篇文章 Spring 注解编程之模式注解 中我们讲到 Spring 模式注解底层原理,依靠 AnnotationMetadata 接口判断是否存在指定元注解. 这篇文章我们主要深入 Annotat ...

  2. 从无到有构建vue实战项目(六)

    十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover=& ...

  3. js方法总结,不断更新...

    1. 返回<li> 元素父节点: document.getElementById("item1").parentNode; 2.   

  4. mui.storage 将数据持久化到本地

    在一个用mui做得app中,要求把历史记录放在本地(感觉...无法言喻的sd),但最终还是做了,以下来记录本次的学习到的内容 mui.plusReady(function() { //这里是一开始定义 ...

  5. SpringBoot集成beetl模板快速入门

    SpringBoot集成beetl模板快速入门 首次探索 beetl官方网址:http://ibeetl.com/ 创建SpringBoot工程(idea) 新建工程 选择创建Spring工程 书写包 ...

  6. bat命令闪退问题

    今天执行一个bat命令,然而会出现问题:双击执行bat命令时,命令提示符界面会闪退. 然而该bat命令在他人电脑上可正常执行,而我会遇到这种问题. 以下是我尝试的方法: 首先尝试编辑bat命令,在ba ...

  7. nl2br()处理字符串中的换行符

    nl2br() 函数 在字符串中包含换行符时,需要对其进行转换,php 中有str_replace()函数,可以直接对字符串进行替换处理.但php中还有nl2br()函数可以直接处理. 1.在字符串中 ...

  8. Redis项目实战---应用及理论(三)---Jedis使用

    Jedis即redis java客户端,源码地址:https://github.com/xetorthio/jedis pom配置: <dependency>    <groupId ...

  9. Java面向对象16种原则

    一   类的设计原则   1 依赖倒置原则-Dependency Inversion Principle (DIP) 2 里氏替换原则-Liskov Substitution Principle (L ...

  10. centos7更新yum库为aliyun库

    1. 备份原来的yum源$sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置ali ...