Giter Site home page Giter Site logo

stamat / waiter.js Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 1.0 9 KB

Simple recursive function that waits for DOM changes (or virtually anything else)

License: MIT License

JavaScript 100.00%
waiter dom-manipulation change-detection dom-changes vanilla-javascript no-dependencies

waiter.js's Introduction

waiter.js

Simple recursive function that waits for DOM changes (or virtually anything else)

Usage

When you use thirdparty frontend plugins that inject DOM or data asynchoriniusly via with minified and uglified code and there is no hook to latch on, this simple piece of code provides a timed interval check for the changes you wish to monitor.

It can wait for a DOM object or data to appear infinitely or you can provide the number of tryes untill it fails, to prevent resource consumption.

Open up the code, it's supersimple and easy to understand! https://github.com/stamat/waiter.js/blob/master/waiter.js

I wrote this like a gazilion times, and finally got fed up by writing the same code...

Example usage

Waiting for OKENDO code to load

  waiter({
    selector: ".okeReviews-reviews-controls",
    iterations: 50, // check 50x
    //interval: 100, default interval
    success: function() {
      console.log('Yay!');
    },
    fail: function() {
      console.log('Nay!');
    }
  });

Parameters

Property Default Accepts Description
selector null string DOM selector string, for the default condition function which checks the selection. This value is also used for indexing iteration counters, so please assign it a unique value if you are checking something other than DOM. MANDATORY!
contiditon document.querySelectorAll function(parameters, current_iteration) Here you can assign a custom condition function to check for, parameter object is passed as the first argument and iteration count as the second.
interval 100 int Time in ms for each check
iterations null int How many times to run each check, if left null or 0 then infinite times
events true boolean If you wish not to trigger document events set this to false. Event names are: "waiter-success: " + selector and "waiter-fail: " + selector; and the target is document.
success null function Callback on success, only argument is parameters object
fail null function Callback on fail if iterations property is set, only argument is parameters object

Events

TO BE CONTINUED...

waiter.js's People

Contributors

stamat avatar

Stargazers

Rihards Mantejs avatar

Watchers

James Cloos avatar  avatar

Forkers

jseye

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.