It will take care of the quirks involved when running under Cordova or on a browser, including notifying the user he/she has to acknowledge opening popups.
Debounce Function
If your App uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn’t fire so often that it bricks browser performance. Debouncing a function limits the rate at which the function can fire.
Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in “execute this function only if 100 milliseconds have passed without it being called.”
A quick example: you have a resize listener on the window which does some element dimension calculations and (possibly) repositions a few elements. That isn’t a heavy task in itself but being repeatedly fired after numerous resizes will really slow your App down. So why not limit the rate at which the function can fire?
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
import { Utils } from'quasar'
(Debounced Function) Utils.debounce(Function fn, Number milliseconds_to_wait, Boolean immediate)
// Example:
window.addEventListener(
'resize',
Utils.debounce(function() {
.... things to do ...
}, 300/*ms to wait*/)
)
Throttle Function
Throttling enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 300 milliseconds.”
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
import { Utils } from'quasar'
(Throttled Function) Utils.throttle(Function fn, Number limit_in_milliseconds)
// Example:
window.addEventListener(
'resize',
Utils.throttle(function() {
.... things to do ...
}, 300/* execute at most once every 0.3s */)
)
(Deep) Copy Objects
A basic respawn of jQuery.extend(). Takes same parameters:
import { Utils } from'quasar'
let newObject = Utils.extend([Boolean deepCopy], targetObj, obj, ...)
Watch out for methods within objects.
Generate UID
Generate unique identifiers:
import { Utils } from'quasar'
let uid = Utils.uid()
// Example: 501e7ae1-7e6f-b923-3e84-4e946bff31a8
Animate
You can create animations through Javascript (using RAF - requestAnimationFrame()).
import { Utils } from'quasar'
let id = Utils.animate.start({
name: 'unique-animation-name', // optional, if none is supplied a unique one is created and returned
finalPos: '100',
pos: '0', // current position
factor: 5, // on each step, it adds (finalPosition - currentPosition) / factor
done (finalPosition) {...}, // function to call when animation is done
apply (currentPosition) {...}, // function called on each step so you can apply changes
threshold: 0.1, // if Math.abs(finalPosition - currentPosition) < threshold
//then stop and we're done
})
// Starting an animation with same name will abort the previous one
// Stop an animation using its name
Utils.animate.stop('unique-animation-name')
// or
Utils.animate.stop(id) // id returned from above
Example:
import { Utils } from'quasar'
Utils.animate.start({
finalPos: 158,
pos: 6,
factor: 10,
threshold: 0.5,
apply (pos) {
el.style.maxHeight = `${pos}px`
},
done () {
// we're done!
}
})
DOM methods
import { Utils } from'quasar'
// Offset on screen
console.log(Utils.dom.offset(DomElement))
// { top: 10, left: 100 }
// Get COMPUTED style (when DomElement is visible!)
// Computed means a DomElement might not have "height" CSS property set,
// but that does not mean it doesn't have a height when it's displayed.
// The follosing method accesses the computed CSS provided by the browser:
Quasar