Throttle scroll event

This decreases the amount of function calls when scrolling through the documentation website.
gradio-app · May 11, 2023 · 7dae5d1 · 7dae5d1
1 parent 3227a9b
commit 7dae5d1
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ No changes to highlight.
 - Fix `gr.Slider` `release` event not triggering on mobile by [@space-nuko](https://github.com/space-nuko) in [PR 4098](https://github.com/gradio-app/gradio/pull/4098) 
 - Removes extraneous `State` component info from the `/info` route by [@abidlabs](https://github.com/freddyaboulton) in [PR 4107](https://github.com/gradio-app/gradio/pull/4107)
 - Make .then() work even if first event fails by [@aliabid94](https://github.com/aliabid94) in [PR 4115](https://github.com/gradio-app/gradio/pull/4115).
+- Scroll event performance by [@shavit](https://github.com/shavit) in [PR 4158](https://github.com/gradio-app/gradio/pull/4158).
 
 ## Documentation Changes:
 

diff --git a/website/homepage/src/docs/template.html b/website/homepage/src/docs/template.html
@@ -445,6 +445,16 @@ <h3 class="text-4xl font-light my-4" id="python-client">
     <script>{% include 'templates/add_anchors.js' %}</script>
     <script>{% include 'templates/add_copy.js' %}</script>
     <script>
+    const throt = function(cb, timeout, args) {
+        let locked = false;
+        return function() {
+            if (locked) return;
+            locked = true;
+            cb(args);
+            setTimeout(function() {locked = false;}, timeout);
+        }
+    };
+
     const show_demo = (component, demo) => {
       document.querySelectorAll(`#${component} .demo-btn.selected-demo`).forEach(n => n.classList.remove('selected-demo'));
       document.querySelectorAll(`#${component} .demo-content`).forEach(n => n.classList.add('hidden'));
@@ -467,57 +477,60 @@ <h3 class="text-4xl font-light my-4" id="python-client">
           mobileNav.classList.add("hidden");
         }
       });
-
-    window.addEventListener("scroll", event => {
-      menuBar.classList.remove("hidden");
-      let fromTop = window.scrollY;
 
-      mainNavLinks.forEach(link => {
-        let section = document.querySelector(link.hash);
-        if (
-          section.offsetTop <= fromTop &&
-          section.offsetTop + section.offsetHeight > fromTop
-        ) {
-          link.classList.add("current-nav-link");
-        } else {
-          link.classList.remove("current-nav-link");
-        }
-      });
 
-      mainNavLinksMobile.forEach(link => {  
-        let section = document.querySelector(link.hash);
-        if (
-          section.offsetTop <= fromTop &&
-          section.offsetTop + section.offsetHeight > fromTop
-        ) {
-          link.classList.add("current-nav-link");
-        } else {
-          link.classList.remove("current-nav-link");
-        }
-      });
 
-    });
+    function highlightCurrentNavLink() {
+        menuBar.classList.remove("hidden");
+        let fromTop = window.scrollY;
+
+        mainNavLinks.forEach(link => {
+            let section = document.querySelector(link.hash);
+            if (
+                section.offsetTop <= fromTop &&
+                section.offsetTop + section.offsetHeight > fromTop
+            ) {
+                link.classList.add("current-nav-link");
+            } else {
+                link.classList.remove("current-nav-link");
+            }
+        });
+
+        mainNavLinksMobile.forEach(link => {  
+            let section = document.querySelector(link.hash);
+            if (
+                section.offsetTop <= fromTop &&
+                section.offsetTop + section.offsetHeight > fromTop
+            ) {
+                link.classList.add("current-nav-link");
+            } else {
+                link.classList.remove("current-nav-link");
+            }
+        });
+    }
 
     let mainNavSubLinks = document.querySelectorAll(".navigation .sub-links");
+
+    function toggleSublinksVisibility() {
+        let fromTop = window.scrollY;
+        mainNavSubLinks.forEach(subLinkDiv => {
+            let hash = subLinkDiv.getAttribute('hash');
+            let section = document.querySelector(hash);
 
-    window.addEventListener("scroll", event => {
-      let fromTop = window.scrollY;
-      mainNavSubLinks.forEach(subLinkDiv => {
-        let hash = subLinkDiv.getAttribute('hash');
-        let section = document.querySelector(hash);
+            if (
+                section.offsetTop <= fromTop &&
+                section.offsetTop + section.offsetHeight > fromTop
+            ) {
+                subLinkDiv.classList.remove("hidden");
+            } else {
+                if (document.querySelector("#search").value.length == 0) {
+                    subLinkDiv.classList.add("hidden");
+                }
+            }
+        });
+    }
+    window.addEventListener("scroll", throt(toggleSublinksVisibility, 300), true);
 
-        if (
-          section.offsetTop <= fromTop &&
-          section.offsetTop + section.offsetHeight > fromTop
-        ) {
-          subLinkDiv.classList.remove("hidden");
-        } else {
-          if (document.querySelector("#search").value.length == 0) {
-            subLinkDiv.classList.add("hidden");
-          }
-        }
-      });
-    });
 
     const search = query => {
       if (query.length > 0) {