当前位置: 首页 > 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(五、列表)
  • 如何进阶一名有竞争力的程序员?
  • 实现简单的正则表达式引擎
  • 2017 前端面试准备 - 收藏集 - 掘金
  • 4月23日世界读书日 网络营销论坛推荐《正在爆发的营销革命》
  • EventListener原理
  • iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码...
  • Java比较器对数组,集合排序
  • Laravel 实践之路: 数据库迁移与数据填充
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • Python_网络编程
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • SpringBoot几种定时任务的实现方式
  • underscore源码剖析之整体架构
  • Vue 2.3、2.4 知识点小结
  • vue学习系列(二)vue-cli
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 如何设计一个微型分布式架构?
  • 思考 CSS 架构
  • 一个完整Java Web项目背后的密码
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 异步
  • ionic异常记录
  • 回归生活:清理微信公众号
  • 数据库巡检项
  • ​Python 3 新特性:类型注解
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • (30)数组元素和与数字和的绝对差
  • (python)数据结构---字典
  • (附源码)springboot 智能停车场系统 毕业设计065415
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (免费领源码)Java#ssm#MySQL 创意商城03663-计算机毕业设计项目选题推荐
  • (七)Java对象在Hibernate持久化层的状态
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (学习日记)2024.04.10:UCOSIII第三十八节:事件实验
  • (转)JAVA中的堆栈
  • (转)Scala的“=”符号简介
  • (转)shell中括号的特殊用法 linux if多条件判断
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • ... 是什么 ?... 有什么用处?
  • .Net Core和.Net Standard直观理解
  • .net core使用RPC方式进行高效的HTTP服务访问