feat: [Request] debounce property in QScrollObservable component quasarframework#2169

Author: rstoenescu

src/components/observables/QScrollObservable.js

@@ -3,6 +3,9 @@ import { listenOpts } from '../../utils/event'
 
 export default {
   name: 'QScrollObservable',
+  props: {
+    debounce: Number
+  },
   render () {},
   data () {
     return {
@@ -21,9 +24,14 @@ export default {
         inflexionPosition: this.dirChangePos
       }
     },
-    trigger () {
-      if (!this.timer) {
-        this.timer = window.requestAnimationFrame(this.emit)
+    trigger (immediately) {
+      if (immediately || this.debounce === 0) {
+        this.emit()
+      }
+      else if (!this.timer) {
+        this.timer = this.debounce
+          ? setTimeout(this.emit, this.debounce)
+          : requestAnimationFrame(this.emit)
       }
     },
     emit () {
@@ -46,9 +54,11 @@ export default {
   mounted () {
     this.target = getScrollTarget(this.$el.parentNode)
     this.target.addEventListener('scroll', this.trigger, listenOpts.passive)
-    this.trigger()
+    this.trigger(true)
   },
   beforeDestroy () {
+    clearTimeout(this.timer)
+    cancelAnimationFrame(this.timer)
     this.target.removeEventListener('scroll', this.trigger, listenOpts.passive)
   }
 }

src/components/pull-to-refresh/QPullToRefresh.js

@@ -112,12 +112,12 @@ export default {
       this.pullPosition -= (this.pullPosition - target) / 7
 
       if (this.pullPosition - target > 1) {
-        this.animating = window.requestAnimationFrame(() => {
+        this.animating = requestAnimationFrame(() => {
           this.__animateTo(target, done, true)
         })
       }
       else {
-        this.animating = window.requestAnimationFrame(() => {
+        this.animating = requestAnimationFrame(() => {
           this.pullPosition = target
           this.animating = false
           done && done()

src/utils/animate.js

@@ -34,12 +34,12 @@ export function start ({name, duration = 300, to, from, apply, done, cancel, eas
       pos: newPos,
       progress
     }
-    anim.timer = window.requestAnimationFrame(handler)
+    anim.timer = requestAnimationFrame(handler)
   }
 
   const anim = ids[id] = {
     cancel,
-    timer: window.requestAnimationFrame(handler)
+    timer: requestAnimationFrame(handler)
   }
 
   return id

src/utils/debounce.js

@@ -30,7 +30,7 @@ export function frameDebounce (fn) {
     if (wait) { return }
 
     wait = true
-    frame = window.requestAnimationFrame(() => {
+    frame = requestAnimationFrame(() => {
       fn.apply(this, args)
       wait = false
     })

src/utils/scroll.js

@@ -22,7 +22,7 @@ export function animScrollTo (el, to, duration) {
 
   const pos = getScrollPosition(el)
 
-  window.requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
     setScroll(el, pos + (to - pos) / duration * 16)
     if (el.scrollTop !== to) {
       animScrollTo(el, to, duration - 16)