website development

5 Essential JavaScript Functions

4  0 2018-01-28 11:05:54

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 URL constructor 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

Comments (4)

  • good

    image

    By Jayashree Asai
    on 2018-02-01 03:34:10

  • Marketing92 is one of the best Companies in the web services world with our Leading Services of Web Development in Pakistan. We are dealing in all types of Business, profile, blog websites. With the help of our Team of Web Developer in Karachi, Pakistan w

    image

    By Marketing IIT
    on 2018-02-07 01:54:02

  • Thanking you for sharing great information on Javascript. I am a developer for website development currently . I am also work on mobile App for client satisfaction.

    image

    By Satisfaction Web Solution
    on 2018-02-09 06:38:26

  • test

    image

    By Jayashree Asai
    on 2018-02-15 01:02:33

Post Your Comments

Headquarter (Pune)



Hong Kong Office



Find Us On

Website Development Company
SEO
Digital Marketing
website development company in Hong Kong
website designer in pune