JavaScript节流函数

xiaoxiao2021-02-28  34

JavaScript节流函数

1.节流函数的通常使用场景?

(1).频繁调整浏览器窗口大小(resize事件)

(2).浏览器页面滚动事件(scroll事件)

(3).鼠标移动(mousemove事件)

(4).input和textarea输入(change事件)

(5)touchmove事件

也就是说,如果用户在浏览器页面中进行操作,而脚本中绑定了某些事件,这些事件会不停的触发

如果不限定触发次数,有可能会导致浏览器卡死或者崩溃,同时也会造成流量的浪费,手机端表现特别明显。

2.场景实例

拿resize事件写一个简单的节流函数:

let count = 0; function test() { console.log(count++); } let timer = null; window.onresize = function () { clearTimeout(timer); timer = setTimeout(() => { test(); }, 200); };

上面的代码就是一个简单的节流函数,但是存在不足。比如,timer变量是在全局作用域中,如果全局变量中存在其他场景的timer,这样就会造成冲突,因此,我们把这个节流函数封装一个闭包,如下:

let count = 0; function test() { console.log(count++); } let throttle = function(fn, delay) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn(); }, delay); } }; window.onresize = function() { throttle(test, 1000)(); };

优化之后的代码是上面这个样子,那么这段代码运行起来性能不能达到我们的预期吗?经过在浏览器中运行发现,在1000毫秒内程序确实是延迟执行了,但是执行后反馈来的结果却是一堆的连续数据,这说明优化的还不行。我们继续改进。

 

let count = 0; function test() { console.log(count++); } let throttle = function(fn, delay, step) { let timer = null; let prev = null; return function() { let now = + new Date(); if (timer) { clearTimeout(timer); } if (!prev) { prev = now; } if (now - prev >= step) { fn(); prev = now; } else {             timer = setTimeout(() => {                 fn(); }, delay); } } }; let resize = throttle(test, 1000, 1000); window.onresize = function() { resize(); };

上面是改动之后的代码,经测试发现,throttle方法必须要先初始化一次,然后在执行。上面我们初始化的方法是resize;

然后,在window的onresize方法中执行resize这个方法,效果达到预期!

3.总结

节流函数在合适的场景下适当运用,可以提高用户体验,减少流量的浪费;节流函数在初期编辑的时候,如果是新手,可能不能一步写完整,因此,当运用节流方法的时候利用浏览器调试,逐步优化自己的代码。

 

如果你觉的本文写的还可以,请点个赞!同时,欢迎留言谈论!谢谢!

转载请注明原文地址: https://www.6miu.com/read-2300257.html

最新回复(0)