Tag: javascript

Detecting when user stopped scrolling

We want to listen for scroll events using addEventListener. We’ll set a delayed timeout function to run a few milliseconds after the event, but with each scroll event we’ll clear that timeout function so it doesn’t run.

When scrolling has stopped, the delayed function doesn’t get cleared and runs.

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

  // Clear our timeout throughout the scroll
  window.clearTimeout( isScrolling );

  // Set a timeout to run after scrolling ends
  isScrolling = setTimeout(function() {

    // Run the callback
    console.log( 'Scrolling has stopped.' );

  }, 66);

}, false);

References
https://gomakethings.com/detecting-when-a-visitor-has-stopped-scrolling-with-vanilla-javascript/

Detect when an image fails to load in Javascript

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

References
https://stackoverflow.com/questions/9815762/detect-when-an-image-fails-to-load-in-javascript
https://www.w3schools.com/jsref/event_onerror.asp

Detect scroll to bottom of html element in Angular

@HostListener('window:scroll', ['$event'])
onWindowScroll() {
  // In chrome and some browser scroll is given to body tag
  const pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
  const max = document.documentElement.scrollHeight;
  const fixedPos = pos + 10;
  console.log(max, fixedPos);
  // pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
  if (fixedPos >= max) {
    if (!this.isFetching) {
      this.nextHistory().subscribe();
    }
  }
}

References
https://stackoverflow.com/questions/40664766/how-to-detect-scroll-to-bottom-of-html-element

Write Media Queries with JavaScript Code

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}

You can also add an event listener which fires when a change is detected:

// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}

// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}

}

References
https://www.sitepoint.com/javascript-media-queries/

How to use Promise in Typescript

let error = true;
function doAsyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (error) {
        reject('error'); // pass values
      } else {
        resolve('done'); // pass values
      }
    }, 1000);
  });
}

doAsyncTask().then(
  (val) => console.log(val),
  (err) => console.error(err)
);

Nested Promise

this.localStorage.clear().toPromise()
  .then((value1: boolean) => {
    console.log(value1);
    return this.localStorage.setItem(value.userName, value.token).toPromise();
  })
  .then((value2: boolean) => {
    console.log(value2);
  });

References
https://codecraft.tv/courses/angular/es6-typescript/promises/
https://stackoverflow.com/questions/40519484/promise-waterfall

Detect DOM changes with Mutation Observers

            let target = document.getElementById(Post.ViewModel.postURLId);
            let observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    console.log(mutation);
                });
            });
            let config = {
                attributes: true, childList: true, characterData: true, subtree: true,
                attributeOldValue: true, characterDataOldValue: true
            };
            observer.observe(target, config);
            // later, you can stop observing
            observer.disconnect();
if (target.addEventListener) {
                target.addEventListener('input', function(e) {
                    console.log(e);
                }, false);
            }

So with the help of above two tricks and browser breakpoints and stacktrace we can detect exact source of error.

References
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver