浅谈JS函数节流防抖
时间:2019-04-07
本文章向大家介绍浅谈JS函数节流防抖,主要包括浅谈JS函数节流防抖使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在前端开发中有一部分的用户行为会频繁的触发事件执行,而对于DOM操作、资源加载等耗费性能的处理,很可能导致界面卡顿,甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。
函数节流(throttle)
函数节流就是预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。好像水滴攒到一定重量才会落下一样。
场景:
- 窗口调整(resize)
- 页面滚动(scroll)
- 抢购疯狂点击(mousedown)
实现:
function throttle(method, delay){ var last = 0; return function (){ var now = +new Date(); if(now - last > delay){ method.apply(this,arguments); last = now; } } } document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);
underscore实现:
_.throttle = function(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : _.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _.now(); if (!previous && options.leading === false) previous = now; //计算剩余时间 var remaining = wait - (now - previous); context = this; args = arguments; //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现) if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; };
函数防抖(debounce)
函数防抖就是在函数需要频繁触发情况时,只有足够空闲的时间,才执行一次。好像公交司机会等人都上车后才出站一样。
场景:
- 实时搜索(keyup)
- 拖拽(mousemove)
实现:
function debounce(method, delay){ var timer = null; return function(){ var context = this,args = arguments; clearTimeout(timer); timer = setTimeout(function(){ method.apply(context, args); },delay); } } document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);
underscore实现:
_.debounce = function(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { var last = _.now() - timestamp; if (last < wait && last >= 0) { timeout = setTimeout(later, wait - last); } else { timeout = null; if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; timestamp = _.now(); var callNow = immediate && !timeout; if (!timeout) timeout = setTimeout(later, wait); if (callNow) { result = func.apply(context, args); context = args = null; } return result; }; };
函数节流(throttle)和函数防抖(debounce)都是通过延时逻辑操作来提升性能的方法,在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别,在需要的时候选择合适的方法处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- .NET Core的日志[3]:将日志写入Debug窗口
- Code2Cloud:比ALM中断更大
- .NET Core的日志[4]:将日志写入EventLog
- 微信小程序不行了?看小马哥带你忆童年
- ASP.NET MVC三个重要的描述对象:ControllerDescriptor和ActionDescriptor的创建
- .NET Core的日志[5]:利用TraceSource写日志
- 物联网芯片正在积极开发 明年将得到爆发
- 韩国全球首测5G网络下自动驾驶 为汽车安全保驾护航的竟是路灯
- 通过与Quickbuild和Mist.io的持续集成实现云管理和使用监控
- .NET Core的文件系统[1]:读取并监控文件的变化
- ASP.NET MVC以ValueProvider为核心的值提供系统: ValueProviderFactory
- 云本机应用程序成熟度的模型
- 如何利用ETW(Event Tracing for Windows)记录日志
- 如何利用ETW(Event Tracing for Windows)记录日志
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法