前端开发:必备的5个JavaScript函数

一、防止高频调用的debounce函数

这个debounce函数对于那些执行事件驱动的任务来说是必不可少的提高性能的函数。如果你在使用scroll,resize,key*等事件触发执行任务时不使用降频函数，也行你就犯了重大的错误。下面这个降频函数debounce能让你的代码变的高效：

这个debounce函数在给定的时间间隔内只允许你提供的回调函数执行一次，以此降低它的执行频率。当遇到高频触发的事件时，这样的限制显得尤为重要。

二、禁止重复调用、只允许执行一次的once函数

很多时候，我们只希望某种动作只能执行一次，就像是我们使用onload来限定只在加载完成时执行一次。下面这个函数就能让你的操作执行一次后就不会再重复执行。

这个once函数能够保证你提供的函数只执行唯一的一次，防止重复执行。

三、获取一个链接的绝对地址getAbsoluteUrl

获取链接的绝对地址并不像你想象的那么简单。下面就是一个非常实用的函数，能根据你输入的相对地址，获取绝对地址：

这里使用了a标签href来生成完整的绝对URL，十分的可靠。

四、用JavaScript创建新的CSS规则insertRule

有时候我们会使用一个CSS选择器(比如document.querySelectorAll)来获取一个 NodeList ，然后给它们每个依次修改样式。其实这并不是一种高效的做法，高效的做法是用JavaScript新建一段CSS样式规则：

这些做法的效率非常高，在一些场景中，比如使用ajax新加载一段html时，使用上面这个方法，你不需要操作新加载的html内容。

五、设定时间/频率循环检测函数

debounce函数是借助于某个事件的触发。但有时候并没有这样的事件可用，那我们只能自己写一个函数来每隔一段时间检查一次。

切图 qietu(.com)