函数节流和函数去抖
概念
看完一些资料之后,自己总结一下;
在有些dom操作中,比如浏览器的scroll(图片懒加载),或者窗口的resize;输入框的keydown和keyup事件(搜索内容输入,自动检索)等等;
如果每次触发上述事件,就去执行操作函数,如果单纯操作pc页面DOM元素,对性能的影响可能不会很明显,但是对于移动端是很明显的。因为操作dom元素会导致页面的reflow;性能不好会有页面明显的错乱和滞后,十分影响用户体验;
重要的是,如果每次触发执行函数,都要进行请求,那么就会在很短时间内触发n多次,会造成服务器很大的负担。所以,就是要进行请求的限制,以达到优化的目的;
函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。过一段时间再眨一下;
函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。在特定时间间隔内再次触发,则从新开始计时,只到停止调用,函数才会执行一次;函数节流简单实现
var ifcontinue = true; function jieliu(delay, fn) { if(!ifcontinue ) { return false; } var timer = ""; var self = this; ifcontinue = false; return function () { clearTimeout(timer);//使用定时器,首先清除定时器 timer = setTimeout(function () { fn.call(self, arguments); ifcontinue = true; },delay) } } function fn() { console.log("函数节流") } window.onscroll = jieliu(1000,fn);
这样每次触发scroll事件,函数只会执行一次;再次触发再次执行;
函数防抖简单实现
function fangdou(delay, fn) { var timer = null; var self = this; return function () { timer = setTimeout(function () { fn.apply(self, arguments); },delay) } } function fn() { console.log("防抖") }
window.onscroll = fangdou(300,fn)