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

    1. #define LeftChild(i) (2*(i)+1) void PercDown(vector<int>&num, int i, int n) { int child ...

  2. python后端面试第八部分:制作简历和如何面试--长期维护

    ###############     就业指导    ################ 这里面有套路,你懂了这个套路,你会找到更好的工作,你会更快的找到工作, ,如何制作简历,五颗星 ,如何投递简历 ...

  3. 实例理解scala 隐式转换(隐式值,隐式方法,隐式类)

    作用 简单说,隐式转换就是:当Scala编译器进行类型匹配时,如果找不到合适的候选,那么隐式转化提供了另外一种途径来告诉编译器如何将当前的类型转换成预期类型.话不多说,直接测试 ImplicitHel ...

  4. va_list、va_start和va_end使用

    我们知道va_start,va_arg,va_end是在stdarg.h中被定义成宏的,由于1.硬件平台的不同 2.编译器的不同,所以定义的宏也有所不同. 在ANSI C中,这些宏的定义位于stdar ...

  5. CSS面试题&知识点汇总

    问题&答案 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? 有两种, IE 盒子模型.W3C 盒子模型: 盒模型: 内容(content).填充(padding).边界(m ...

  6. hadoop创建两大错误:Bad connection to FS. command aborted. exception和Shutting down NameNode at hadoop

    1.问题目录表: Error代码   failed on connection exception: java.net.ConnectException: Connection refused 3.  ...

  7. python心得二(编码问题)

    内容编码 字码发展1.ascii(只识别英文)8位就可以表示所有英文,字符数字,1个字节就可以 2.unicode(万国码)最少两个字节中文三个字节 3.utf-8万国码存在空间浪费英文8位中文24位 ...

  8. 关于log4j中log4j.properties和log4j.xml的加载顺序

    如果采用log4j输出日志,要对log4j加载配置文件的过程有所了解. log4j启动时,默认会寻找source folder下的log4j.xml配置文件,若没有,会寻找log4j.properti ...

  9. js寄生组合式继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. node新人

    node  使用   http和express创建服务器环境 如 apache  iis等 不需要配置一堆文件  为啥使用node  省事  v8引擎  异步js 不影响浏览者浏览网站 redis   ...