当前位置: 首页 > news >正文

什么是Javascript函数节流?

现在javascript的用途 真的很广,感觉什么事都可以做,比如做视频监控,时刻看看你喜欢的人再做什么,哎呀妈呀,这可是犯法的,不行不行。

最近工作上遇到个需求,:一个原本是pc端框架配置的需求,现在领导突然急着要,让我从pc端兼容移动的大小,瞬间脑壳疼,由于用的都是px单位,不好真疼,然后就想到根据浏览器窗口改变的时候需要改一些页面元素大小
原大小

clipboard.png


配置成移动的的时候

clipboard.png

function resizehandler(){

console.log(new Date().getTime());
console.log(++n);

}
然后我试着拖拽窗口,看了下控制台居然打印了50几次,这并不是我想要的,作为一个合理的代码,是只需要执行一次的,可能函数里面的代码很复杂,但却是我想要的。
网上搜了下JavaScript高级程序设 中有专门应对此问题的函数节流

原理很简单,利用定时器,让函数执行延迟500毫秒,在500毫秒内如果有函数又被调用则删除上一次调用,这次调用500毫秒后执行,如此往复
let n=0;
function resizehandler(){

console.log(new Date().getTime());
console.log(++n);

}

function fn(cb,context){

clearTimeout(cb.Tid);
cb.Tid=setTimeout(function(){
    cb.call(context);
},500);

}

window.οnresize=function(){

fn(resizehandler,window);

};

这样就实现了想要的效果

clipboard.png

相关文章:

  • C语言小程序-基于链表的学生信息管理
  • js基础
  • 前嗅ForeSpider教程:创建模板
  • spring cloud构建互联网分布式微服务云平台-SpringCloud集成项目简介
  • MySQL无法启动几种常见问题小结
  • C语言笔记(第一章:C语言编程)
  • sqoop使用手册--mysql配置
  • width 值 max-content、fill-available、min-content 对应作用
  • multimap详讲
  • 剑指offer-树的子结构
  • JavaScript HTML DOM
  • js提交表单错误:document.form.submit() is not a function
  • React as a UI Runtime(五、列表)
  • 如何进阶一名有竞争力的程序员?
  • 实现简单的正则表达式引擎
  • [nginx文档翻译系列] 控制nginx
  • Angularjs之国际化
  • C语言笔记(第一章:C语言编程)
  • MySQL数据库运维之数据恢复
  • 半理解系列--Promise的进化史
  • 创建一种深思熟虑的文化
  • 前端 CSS : 5# 纯 CSS 实现24小时超市
  • 如何进阶一名有竞争力的程序员?
  • 用Python写一份独特的元宵节祝福
  • 自动记录MySQL慢查询快照脚本
  • 1.Ext JS 建立web开发工程
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • %3cscript放入php,跟bWAPP学WEB安全(PHP代码)--XSS跨站脚本攻击
  • (3)(3.5) 遥测无线电区域条例
  • (Ruby)Ubuntu12.04安装Rails环境
  • (翻译)terry crowley: 写给程序员
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • (图)IntelliTrace Tools 跟踪云端程序
  • ../depcomp: line 571: exec: g++: not found
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET Core 实现 Redis 批量查询指定格式的Key
  • .net 程序 换成 java,NET程序员如何转行为J2EE之java基础上(9)
  • .net 获取url的方法
  • .net 流——流的类型体系简单介绍
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .netcore如何运行环境安装到Linux服务器
  • .NET企业级应用架构设计系列之技术选型
  • @cacheable 是否缓存成功_让我们来学习学习SpringCache分布式缓存,为什么用?
  • @JsonSerialize注解的使用
  • []我的函数库
  • [bzoj1006]: [HNOI2008]神奇的国度(最大势算法)
  • [codeforces]Recover the String
  • [c语言]小课堂 day2
  • [DAU-FI Net开源 | Dual Attention UNet+特征融合+Sobel和Canny等算子解决语义分割痛点]
  • [Hive] 常见函数
  • [I2C]I2C通信协议详解(一) --- 什么是I2C
  • [Java] 图说 注解