简单的节流函数throttle
Posted tangjiao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的节流函数throttle相关的知识,希望对你有一定的参考价值。
在实际项目中,总会遇到一些函数频繁调用的情况,比如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的主要内容,如果未能解决你的问题,请参考以下文章
vue 简单实现函数防抖(debounce)和节流(throttle)