Socket
Socket
Sign inDemoInstall

delayed

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    delayed

A collection of setTimeout-related function wranglers


Version published
Weekly downloads
1.9K
decreased by-17.39%
Maintainers
1
Install size
18.1 kB
Created
Weekly downloads
 

Readme

Source

Delayed

A collection of JavaScript helper functions for your functions, using setTimeout() to delay, defer and debounce

NPM

Delayed is designed for use across JavaScript runtimes, including the browser and within Node.js. It is available in npm as "delayed" or can be downloaded.

API


delay(fn, ms)
delay(fn, ms, context)
delay(fn, ms, context, arg1, arg2...)

delay() is an interface to setTimeout() but with better this handling and consistent cross-browser argument passing.

Example:

// print "beep" to the console after 1/2 a second
delayed.delay(() => console.log('beep'), 500)

function print (a, b) { console.log(this[a], this[b]) }
delayed.delay(print, 5000, { 'foo': 'Hello', 'bar': 'world' }, 'foo', 'bar')
// after 5 seconds, `print` is executed with the 3rd argument as `this`
// and the 4th and 5th as the arguments

delay() returns the timer reference from setTimeout() so it's possible to retain it and call clearTimeout(timer) to cancel execution.


defer(fn)
defer(fn, context)
defer(fn, context, arg1, arg2...)

defer() is essentially a shortcut for delay(fn, 1...), which achieves a similar effect to process.nextTick() in Node.js or the proposed setImmediate() that we should start seeing in browsers soon (it exists in IE10). Use it to put off execution until the next time the browser/environment is ready to execute JavaScript. Given differences in timer resolutions across browsers, the exact timing will vary.

Note: future versions of delayed will likely detect for and use setImmediate() for deferred functions.

defer() returns the timer reference from setTimeout() so it's possible to retain it and call clearTimeout(timer) to cancel execution, as long as it's done within the same execution tick.


delayed(fn, ms)
delayed(fn, ms, context)
delayed(fn, ms, context, arg1, arg2...)

Returns a new function that will delay execution of the original function for the specified number of milliseconds when called.

Example:

// a new function that will print "beep" to the console after 1/2 a second when called
var delayedBeeper = delayed.delay(() => console.log('beep'), 500)

delayedBeeper()
delayedBeeper()
delayedBeeper()

// 1/2 a second later we should see:
//   beep
//   beep
//   beep
// each will have executed on a different timer

The new delayed function will return the timer reference from setTimeout() so it's possible to retain it and call clearTimeout(timer) to cancel execution of that particular call.


deferred(fn)
deferred(fn, context)
deferred(fn, context, arg1, arg2...)

Returns a new function that will defer execution of the original function, in the same manner that defer() defers execution.

The new delaying function will return the timer reference from setTimeout() so it's possible to retain it and call clearTimeout(timer) to cancel execution of that particular call, as long as it's done within the same execution tick.


debounce(fn, ms)
debounce(fn, ms, context)
debounce(fn, ms, context, arg1, arg2...)

Also available with the name cumulativeDelayed()

Returns a new function that will delay execution of the original function for the specified number of milliseconds when called. Execution will be further delayed for the same number of milliseconds upon each subsequent call before execution occurs.

The best way to explain this is to show its most obvious use-case: keyboard events in the browser.

<!doctype html>
<html>
<body>
<textarea id="input" style="width: 100%; height: 250px;">Type in here</textarea>
<div id="output" style="border: solid 1px black;">Show in here</div>

<script src="https://raw.github.com/rvagg/delayed/master/delayed.js" type="text/javascript"></script>
<script>
  function render (event) {
    var content = event.target.value
    content = content.replace('&', '&amp;')
                     .replace('>', '&gt;')
                     .replace('<', '&lt;')
                     .replace('\n', '<br>')
    document.getElementById('output').innerHTML = content
  }

  var delayedRender = delayed.debounce(render, 500)

  document.getElementById('input').addEventListener('keyup', delayedRender)
</script>
</body>
</html>

debounce() is a way of putting off tasks that need to occur in reaction to potentially repeating events, particularly where the task may be expensive or require some time to execute such as an AJAX call.

In our example, we're reacting to keyboard events but instead of running the render() function each time a key is pressed, we keep on pushing back execution while keyboard events keep coming in. Only when we have a pause in keyboard events of at least 500ms does render() actually get called.

The new delaying function will return the timer reference from setTimeout() so it's possible to retain it and call clearTimeout(timer) to cancel execution of that particular call.


Delayed is Copyright (c) 2014 Rod Vagg @rvagg and licensed under the MIT licence. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE.md file for more details.

Keywords

FAQs

Last updated on 23 Jun 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc