5 Essential JavaScript Functions for website development

JavaScript is a programming language that helps you to implement complex things

on web pages.

JavaScript provides basic features, like addEventListener and attachEvent And the Followings are 5 important JavaScript Functions

 1) Debounce:- The debounce function can be a think of changer when it comes to event-fueled performance.  If you are not using a debouncing function with a scroll, resize, key-event, Here is a debounce function to keep your code efficient-

 function debounce(func, wait, immediate)

{

var timeout;
return function()
{
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// Usage
var myEfficientFn = debounce(function()
// All the taxing stuff you do
}, 250);
window.addEventListener('resize', myEfficientFn);

2) Poll:-  As we mentioned with the debounce function, sometimes you do not get to plug into an event to signify the desired stat. if the event doesn't exist so you need to check for your desired state at intervals-

// The polling function
function poll(fn, timeout, interval) {
var endTime = Number(new Date()) + (timeout || 2000);
interval = interval || 100;
var checkCondition = function(resolve, reject) {
// If the condition is met, we're done!
var result = fn();
if(result) {
resolve(result);
}
// If the condition isn't met but the timeout hasn't elapsed, go again
else if (Number(new Date()) < endTime) {
setTimeout(checkCondition, interval, resolve, reject);
}
// Didn't match and too much time, reject!
else {
reject(new Error('timed out for ' + fn + ': ' + arguments));
}
};
return new Promise(checkCondition);
}
// Usage:  ensure element is visible
poll(function() 
{
return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150).then(function() 
{
// Polling done, now do something else!
}).catch(function() 
{
// Polling timed out, handle the error!
});

3) Once:- There are times when you prefer a given functionality only happen once similar to the way you did use an onload event.  This code provides you said functionality-

function once(fn, context) {
var result;
return function() {
if(fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
// Usage
var canOnlyFireOnce = once(function() {
console.log('Fired!');
});
canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nada

4) getAbsoluteUrl:- Getting an absolute URL from a variable string is not as easy.  There is the URLconstructor but it can act up if you do not provide the required arguments (which sometimes). Here is code that helps you-

var getAbsoluteUrl = (function() {
var a;
return function(url) {
if(!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();
// Usage
getAbsoluteUrl('/something');

5) isNative:- Knowing if a given function is native or not can signal if your willing to override it.

 

;(function() {
// Used to resolve the internal `[[Class]]` of values
var toString = Object.prototype.toString;
// Used to resolve the decompiled source of functions
var fnToString = Function.prototype.toString;
// Used to detect host constructors (Safari > 4; really typed array specific)
var reHostCtor = /^\[object .+?Constructor\]$/;
// Compile a regexp using a common native method as a template.
// We chose `Object#toString` because there's a good chance it is not being mucked with.
var reNative = RegExp('^' +
// Coerce `Object#toString` to a string
String(toString)
// Escape any special regexp characters
.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')
// Replace mentions of `toString` with `.*?` to keep the template generic.
 // Replace thing like `for ...` to support environments like Rhino which add extra info
// such as method arity.
.replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
);
function isNative(value) {
var type = typeof value;
return type == 'function'
// Use `Function#toString` to bypass the value's own `toString` method
// and avoid being faked out.
? reNative.test(fnToString.call(value))
// Fallback to a host object check because some environments will represent
// things like typed arrays as DOM methods which may not conform to the
// normal native pattern.
: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
}
// export however you want
module.exports = isNative;
}());
// Usage
isNative(alert); // true
isNative(myCustomFunction); // false