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

let throttle = function(fn,interval){
let __self = fn,timer,firstTime = true;
return function(){
var args = arguments,__me = this;
if(firstTime){
__self.apply(__me,args);
return firstTime = false;
}
if(timer){
return false;
}
//先执行了一次,firstTime是false,然后500毫秒之后利用定时器再次执行。
timer = setTimeout(function(){
clearTimeout(timer);
timer = null;
__self.apply(__me,args);
},interval||500)
}
} window.onresize = throttle(function(){
console.log(1)
},500)

此函数可以触类旁通,throttle是个高阶函数,参数输入是个函数【该频繁调用的函数】以及触发时间,第一次触发有个只执行一次的方法,后面接着就是定时器触发函数。节流函数的本质就是利用定时器的延迟进行函数触发。

【完】

后来我才知道,他并不是我的花。只是我恰好途径了他的盛放。

简单的节流函数throttle的更多相关文章

  1. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

  2. JavaScript 节流函数 Throttle 详解

    在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏 ...

  3. Javascript中 节流函数 throttle 与 防抖函数 debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...

  4. js 节流函数 throttle

    /* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...

  5. vue实现输入框的模糊查询(节流函数的应用场景)

    上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...

  6. js实现防抖函数和节流函数

    防抖函数(debounce) 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行: 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用 ...

  7. (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)

     JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)         函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...

  8. JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)

    函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我 ...

  9. JS的函数节流(throttle)

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

随机推荐

  1. POJ 3617 Best Cow Line 字典序最小

    #include<cstdio> #include<iostream> #include<algorithm> #include<queue> #inc ...

  2. [LC] 39. Combination Sum

    Given a set of candidate numbers (candidates) (without duplicates) and a target number (target), fin ...

  3. C++中stoi函数

    作用: 将 n 进制的字符串转化为十进制 头文件: #include <string> 用法: stoi(字符串,起始位置,n进制),将 n 进制的字符串转化为十进制 示例: stoi(s ...

  4. 查看pip安装的包的位置

  5. SRA|GEO|Taxonomy|Pubmed|MeSH|EBI|Uniprot|Human project|Ensembl|UCSC

    生物医学大数据: SRA:Sequence Read Archive (SRA) makes biological sequence data available to the research co ...

  6. 忘记mysql密码后重置密码

    https://jingyan.baidu.com/album/c275f6ba479ca9e33d7567ee.html?picindex=4 找不到mysql的my.ini文件问题: https: ...

  7. 我是青年你是良品-魅蓝NOTE 2

    2" title="我是青年你是良品-魅蓝NOTE 2">   明天魅蓝即将迎来自己的新品发布会.选择儿童节的第二天后最喜爱的手机品牌.让其成为真正青年的良品. 在 ...

  8. centos上安装python环境

    1.安装python-pip ​ 首先安装epel扩展源: ​ yum -y install epel-release ​ 更新完成之后,安装pip: ​ yum -y install python- ...

  9. 为什么 generator 忽略第一次 next 调用的参数值呢?

    首先要理解几个基本概念. 执行生成器不会执行生成器函数体的代码,只是获得一个遍历器 一旦调用 next,函数体就开始执行,一旦遇到 yield 就返回执行结果,暂停执行 第二次 next 的参数会作为 ...

  10. AI未来如何应对人类的欺骗?

    人工智能正以可预见.不可预见的种种形式无孔不入地涉足社会的各个层面,这既让人兴奋,也让人不安.我们能够预测到这样的情绪反应,但我们真的能够预测到人工智能所涉及的相关风险吗? 假若现在是2022年,你乘 ...