防抖函数(debounce)

  1. 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行;
  2. 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用防抖函数设置在onresize完成后一段时间内不再有窗口大小变动,此时再进行dom的重排重绘;
	function debounce(fun,delay){
var timer = null;
return function(){
if(timer !=== null){
clearTimeout(timer);
};
timer = setTimeout(fun,delay);
}
}; function handler(){
console.log('hello')
}; window.onresize = function(){
debounce(handler,1000);
};

节流函数(throttle)

  1. 含义:在函数被调用成功后,短时间内不会被再次触发;
  2. 用途:当点击表单按钮的时候,能够有效的避免高频次的提交操作;
	function throttle(fun.delay){
var flag = false;
return function(){
var _this = this;
var args = arguments;
if(flag){
return;
}else{
flag = true;
setTimeout(function(){
fun.apply(_this,args);
flag = false;
},delay);
}
}
}; function handler(){
console.log('world');
}; window.addEventListener('scroll',throttle(handler,1000));

总结:

  • 相同防抖和节流函数都可以有效的减少短时间内触发同一函数的频次;
  • 不同的是 以百度首页的输入框自动提示搜索关联词功能为例:
    • 防抖函数会确定在你输入完成后的一定时间(delay)去请求接口数据;
    • 节流函数会在你整个输入过程期间内,没过一定时间(delay)请求一次接口数据;

js实现防抖函数和节流函数的更多相关文章

  1. [手写系列] Spirit带你实现防抖函数和节流函数

    前言 防抖函数和节流函数,无论是写业务的时候还是面试的时候,想必大家已经听过很多次了吧.但是大家在用到的时候,有了解过他们之间的区别嘛,他们是如何实现的呢?还是说只是简单的调用下像lodash和und ...

  2. JS奇淫巧技:防抖函数与节流函数

    应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...

  3. JS 防抖函数和节流函数

    文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...

  4. JS基石之-----防抖节流函数

    防抖和节流函数   阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别   一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...

  5. 简单的节流函数throttle

    在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制 ...

  6. js函数的节流与防抖

    一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...

  7. js函数的节流和防抖

    js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...

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

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

  9. js面试题之手写节流函数和防抖函数

    函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...

随机推荐

  1. 高性能mysql——高性能索引策略

    <高性能MySQL>读书笔记 一. 索引的优点 1. 索引可以让服务器快速定位到表的指定位置,大大减少了服务器需要扫描的数量: 2. 最常见的B-Tree索引按照顺序存储数据,可以用来做o ...

  2. C# DataTable to List<T> based on reflection.

    From https://www.cnblogs.com/zjbky/p/9242140.html static class ExtendClass { public static List<T ...

  3. Dubbo简介与基本概念

    场景 分布式系统的发展演变以及RPC简介: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103555049 Dubbo简介 Ap ...

  4. 开源资产管理系统Snipe-IT

    CentOS7安装IT资产管理系统Snipe-IT介绍资产管理工具Github:https://github.com/snipe/snipe-it官网:https://snipeitapp.com/D ...

  5. 我如何通过K8S开发认证(CKAD)考试

    题记:笔者最近经过3个多月的空余时间准备,终于通过了K8S开发认证(CKAD)的考试,在这里简单给大家分享一下经验. 一,先科普下CKAD 众所周知,Kubernetes在容器编排器大战中脱颖而出后, ...

  6. React路由基本的使用(一)

    路由的基本使用 下载 npm i -D react-router react-router-dom APP.js ps==>NavLink 选中的时候 可以高亮 demo 是你自己添加的一个类哈 ...

  7. C语言笔记 02_基本语法&数据类型&变量

    基本语法 令牌 C 程序由各种令牌组成,令牌可以是关键字.标识符.常量.字符串值,或者是一个符号.例如,下面的 C 语句包括五个令牌: printf("Hello, World! \n&qu ...

  8. Iterable与Collection源码学习

    接口 - Iterable<T> - 可迭代 描述 实现本接口的类,其对象可以被迭代.同时支持forEach语法 方法 Iterator<T> iterator() 类型 抽象 ...

  9. python中list的运算,操作及实例

    在操作list的时候,经常用到对列表的操作运算,比如说,列表添加,删除操作,其实,这里面经常回遇到这样一个问题,就是列表的操作容易被混淆了. 有人做了一个总结,这个很清晰,我就不多做阐述了: 1.ap ...

  10. DBCC TRACEON - 跟踪标志 (Transact-SQL)

    跟踪标志用于设置特定服务器特征或更改特定行为. 例如,跟踪标志 3226 是一种常用的启动跟踪标志,可取消显示错误日志中的成功备份消息. 跟踪标志经常用于诊断性能问题或调试存储过程或复杂的计算机系统, ...