ScrollDirectionResolver add processing interval and remove VERSION properties

Author: Chakwen Hong

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swgrhck/scroll-monitor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "This is a JavaScript plugin that monitors and responds to scroll event, and supports the usage via data attributes to separate html from script.",
   "module": "dist/bundle/scroll-monitor.esm.js",
   "browser": "dist/bundle/scroll-monitor.umd.js",

readme.md

@@ -105,6 +105,8 @@ window.addEventListener('scroll.up.scroll-monitor', event => {
 })
 ```
 
+Since `scroll` events can fire at a high rate, so `ScrollDirectionResolver` have a time interval to recognize direction, which default to `50ms`. You can get or set interval by `resolver.inteval`, or set `interval` when creating resolver by `new ScrollDirectionResolver(inteval)`.
+
 ## Extend ScrollMonitor
 
 The `ScrollMonitor` is flexible and pluggable, this means you can extend `ScrollMonitor` easily if present components can't satisfy your needs.

src/monitor.js

@@ -1,13 +1,12 @@
 /**
  * ----------------------------------------------------------------------------------
- * ScrollMonitor (v0.1.0): monitor.js
+ * ScrollMonitor: monitor.js
  * Licensed under MIT (https://github.com/swgrhck/scroll-monitor/blob/master/LICENSE)
  * ----------------------------------------------------------------------------------
  */
 
 const Monitor = (() => {
 
-  const VERSION = '0.1.0'
   const EVENT_NAMESPACE = 'scroll-monitor'
 
   const Selectors = {
@@ -55,10 +54,6 @@ const Monitor = (() => {
 
     // Static
 
-    static get VERSION() {
-      return VERSION
-    }
-
     static get NAMESPACE() {
       return EVENT_NAMESPACE
     }

src/scroll-direction-resolver.js

@@ -2,7 +2,7 @@ import Monitor from './monitor'
 
 /**
  * ----------------------------------------------------------------------------------
- * ScrollMonitor (v0.1.0): scroll-up.js
+ * ScrollMonitor: scroll-up.js
  * Licensed under MIT (https://github.com/swgrhck/scroll-monitor/blob/master/LICENSE)
  * ----------------------------------------------------------------------------------
  */
@@ -13,8 +13,6 @@ import Monitor from './monitor'
  */
 const ScrollDirectionResolver = (() => {
 
-  const VERSION = '0.1.0'
-
   const Selectors = {
     SCROLL_DIRECTION_MONITOR: '[data-monitor~="scroll-direction"]'
   }
@@ -41,10 +39,21 @@ const ScrollDirectionResolver = (() => {
     DOM_CONTENT_LOADED: 'DOMContentLoaded'
   }
 
+  const DEFAULT_INTERVAL = 50
+
   class ScrollDirectionResolver {
 
-    static get VERSION() {
-      return VERSION
+    constructor(interval) {
+      this._interval = interval !== undefined ? interval : DEFAULT_INTERVAL
+      this._ticking = false
+    }
+
+    get interval() {
+      return this._interval
+    }
+
+    set interval(value) {
+      this._interval = value
     }
 
     get eventTypes() {
@@ -86,18 +95,25 @@ const ScrollDirectionResolver = (() => {
 
     resolve(lastMetric, crtMetric) {
       const events = []
-      if (crtMetric.top < lastMetric.top) {
-        events.push(new Event(Events.SCROLL_UP))
-      }
-      if (crtMetric.top > lastMetric.top) {
-        events.push(new Event(Events.SCROLL_DOWN))
-      }
-      if (crtMetric.left < lastMetric.left) {
-        events.push(new Event(Events.SCROLL_LEFT))
-      }
-      if (crtMetric.left > lastMetric.left) {
-        events.push(new Event(Events.SCROLL_RIGHT))
+
+      if (!this._ticking) {
+        this._ticking = true
+        setTimeout(() => this._ticking = false, this._interval)
+
+        if (crtMetric.top < lastMetric.top) {
+          events.push(new Event(Events.SCROLL_UP))
+        }
+        if (crtMetric.top > lastMetric.top) {
+          events.push(new Event(Events.SCROLL_DOWN))
+        }
+        if (crtMetric.left < lastMetric.left) {
+          events.push(new Event(Events.SCROLL_LEFT))
+        }
+        if (crtMetric.left > lastMetric.left) {
+          events.push(new Event(Events.SCROLL_RIGHT))
+        }
       }
+
       return events
     }
   }

test/unit/monitor.js

@@ -17,12 +17,6 @@ describe('Monitor', function () {
     expect(Monitor).to.be.a('function')
   })
 
-  describe('static #VERSION', function () {
-    it('should return as a string', function () {
-      expect(Monitor).to.have.property('VERSION').that.is.a('string')
-    })
-  })
-
   describe('static #NAMESPACE', function () {
     it('should return as a string', function () {
       expect(Monitor).to.have.property('NAMESPACE').that.is.a('string')

test/unit/scroll-direction-resolver.js

@@ -5,9 +5,19 @@ describe('ScrollDirectionResolver', function () {
     expect(ScrollDirectionResolver).to.be.a('function')
   })
 
-  describe('static #VERSION', function () {
-    it('should return version as string', function () {
-      expect(ScrollDirectionResolver).to.have.property('VERSION').that.is.a('string')
+  describe('#interval', function () {
+    it('should return default interval when undefined', function () {
+      expect(new ScrollDirectionResolver()).to.have.property('interval', 50)
+    })
+
+    it('should return defined interval', function () {
+      expect(new ScrollDirectionResolver(0)).to.have.property('interval', 0)
+    })
+
+    it('should change interval', function () {
+      var resolver = new ScrollDirectionResolver()
+      resolver.interval = 100
+      expect(resolver.interval).to.equal(100)
     })
   })
 
@@ -73,10 +83,29 @@ describe('ScrollDirectionResolver', function () {
       expect(events[0]).to.be.an.instanceof(Event).that.has.property('type', 'scroll.up.scroll-monitor')
       expect(events[1]).to.be.an.instanceof(Event).that.has.property('type', 'scroll.right.scroll-monitor')
 
+      resolver = new ScrollDirectionResolver()
       events = resolver.resolve(crtMetric, lastMetric)
       expect(events).to.be.an.instanceof(Array).that.has.lengthOf(2)
       expect(events[0]).to.be.an.instanceof(Event).that.has.property('type', 'scroll.down.scroll-monitor')
       expect(events[1]).to.be.an.instanceof(Event).that.has.property('type', 'scroll.left.scroll-monitor')
     })
+
+    it('should not resolve events if subsequent invocations are within time interval', function () {
+      var resolver = new ScrollDirectionResolver(1000)
+      var m1 = {top: 100, left: 0}, m2 = {top: 0, left: 100}
+      expect(resolver.resolve(m1, m2)).to.have.lengthOf.above(0)
+      expect(resolver.resolve(m1, m2)).to.have.lengthOf(0)
+    })
+
+    it('should resolve events if exceeds the time interval', function (done) {
+      var resolver = new ScrollDirectionResolver()
+      var m1 = {top: 100, left: 0}, m2 = {top: 0, left: 100}
+      expect(resolver.resolve(m1, m2)).to.have.lengthOf.above(0)
+      expect(resolver.resolve(m1, m2)).to.have.lengthOf(0)
+      setTimeout(function () {
+        expect(resolver.resolve(m1, m2)).to.have.lengthOf.above(0)
+        done()
+      }, 50)
+    })
   })
 })