场景说明:一般我们在前端页面中会给元素绑定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. Kafka部署

    Kafka依赖Zookeeper,虽然Kafka自带zookeeper,但是建议单独部署,所以先部署Zookeeper. 测试环境 citus1,citus2,citus3三台机器.对主机名和ip在/ ...

  2. [转载]linux下清除Squid缓存的方法记录

    在日常运维工作中,只要用到squid缓存服务,就会常常被要求清理squid缓存. 比如公司领导要求删一篇新闻,新闻是生成的静态.运维人员把服务器上静态的新闻页面删除了后,不料代理服务器上缓存还有.缓存 ...

  3. 关于使用 AJax 生成Form表单,且表单提交需要验证,验证实效的解决方法

    @Ajax.ActionLink("添加", "AddUser",new AjaxOptions() {InsertionMode = InsertionMod ...

  4. I/O的简介

    文本我们能读懂的都可以认为是字符流,文章 java文件都是字符流数据 流的分类 输入流 输出流 1.输出流 Writer:关于字符流的父类,抽象类.与之相对的输入流 Reader类 一.字符流 字符流 ...

  5. fiddle知识点六、如何使用fiddle进行模拟弱网

    为什么要模拟弱网 随着互联网的快速发展,越来越多的应用核心功能需要网络进行实现.同一应用在2G.3G.4G和WiFi的不停网络下,响应各有不同.但是因为现在的网络普遍为4G网络,为了保证应用在不同的网 ...

  6. (11)ASP.NET Core 中的配置一(Configuration)

    1.前言 ASP.NET Core在应用程序上引入Microsoft.Extensions.Configuration配置,可以支持多种方式配置,包括命令行配置.环境变量配置.文件配置.内存配置,自定 ...

  7. jQuery框架操作CSS

    3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦 ...

  8. On The Way—Step 1 :python入门之Python的历程

    1.python的历史 2004 Django框架 python2 和 python3的区别 python2 源码不统一 有重复功能代码 python3 源码统一 没有重复功能代码 Python的发展 ...

  9. 知识图谱学习与实践(4)——Protégé使用入门

    1 Protégé简介 Protégé是一个本体建模工具软件,由斯坦福大学基于java语言开发的,属于开放源代码软件.软件主要用于语义网中本体的构建和基于本体的知识应用,是本体构建的核心开发工具,最新 ...

  10. java中dao层和service层的区别是什么

    dao层中已经有操作数据库的方法了,为什么还要service层去封装?有什么好处? tanghui12321 | 浏览 131990 次  我有更好的答案  推荐于2017-10-06 18:44:5 ...