在实际项目中,总会遇到一些函数频繁调用的情况,比如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. 01-Java 教程

    一.我的第一个 java 程序 创建文件 HelloWorld.java(文件名需与类名一致), 代码如下: public class HelloWorld { public static void ...

  2. Ribbon XML Editor 2019.01.23-Setup.zip(支持64位)

    RibbonXMLEditor是一款用于书写和测试customUI XML代码的国产工具,具有XML验证.Office文档压入.回调函数查询等多种功能. 可作为定制Office自定义界面有关程序开发的 ...

  3. Spring Boot: Jdbc javax.net.ssl.SSLException: closing inbound before receiving peer's close_notify

    jdbc:mysql://127.0.0.1:3306/xxx?useSSL=false 在后面添加?useSSL=false即可 参考网站

  4. Java IO: InputStreamReader和OutputStreamWriter

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍InputStreamReader和OutputStreamWriter.细心的读者可 ...

  5. hadoop集群搭建(docker)

    背景 目前在一家快递公司工作,因项目需要,对大数据平台做个深入的了解.工欲利其器必先利其器,在网上找了许多教程,然后自己搭建一个本地的环境并记录下来,增加一些印象. 环境搭建 1)Ubuntu doc ...

  6. HDU-3579-Hello Kiki (利用拓展欧几里得求同余方程组)

    设 ans 为满足前 n - 1个同余方程的解,lcm是前n - 1个同余方程模的最小公倍数,求前n个同余方程组的解的过程如下: ①设lcm * x + ans为前n个同余方程组的解,lcm * x ...

  7. Mybatis工作流程及其原理与解析

    Mybatis简介:    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBat ...

  8. in与exist , not in与not exist 的区别

    in和exists     in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的.     ...

  9. 吴裕雄--天生自然 R语言开发学习:时间序列(续三)

    #-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...

  10. YY孵化虎牙,陌陌收购探探:你更看好谁?

    近日欢聚时代公布了2017第四季财报和全年财报,表现不错.其CFO 金秉表示,虎牙最近向美国证券交易委员会(SEC)提交了注册上市申请书草案文件,可能会在美国IPO上市,以便获取自己的投资者群体以融资 ...