Skip to content
This repository has been archived by the owner on Sep 11, 2022. It is now read-only.

* Add debounce function taken from https://davidwalsh.name/javascript… #249

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

SwiftThemes
Copy link

…-debounce-function to scroll and resize event listeners.

* Remove height attribute from sticky wrapper when unstuck.
@welcomeuniverse
Copy link

Hi @SwiftThemes

Thanks for the debounce solution. However, with scroll, would you not want to be throttling rather than debouncing? Looking at the number of pull requests, it feels like the author may not be actively maintaining. So I thought maybe we can just discuss directly here. I am trying to use this for a project here http://www.nova969.com.au/nova969 And I have throttled (250ms) before calling the function. Yet, you will notice that there is a lag at the end. That is, at the end, as you scroll, the top position is constantly calculated and it feels like there is a huge lagging. ANy idea?

@SwiftThemes
Copy link
Author

Problem with throttle is, if the function is executed just before it should be unstuck, it won't get to its original position once its no longer hidden.
Where as in debounce, the execution is guaranteed.

I did not know about throttle before you mentioned it, so my understanding may be wrong.

I tested both and 1'm good with deboucen @50ms.

Problem with debounce is, it won't stick immediately, but for my use case 50ms is ok.

But if I can get throttle to execute once the event is completely stopped, that would be perfect.

Here are my functions

function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    function throttle (callback, limit) {
        var wait = false;                  // Initially, we're not waiting
        return function () {               // We return a throttled function
            if (!wait) {                   // If we're not waiting
                callback.call();           // Execute users function
                wait = true;               // Prevent future invocations
                setTimeout(function () {   // After a period of time
                    wait = false;          // And allow future invocations
                }, limit);
            }
        }
    }

@SwiftThemes
Copy link
Author

I just added callback call in set timeout, I'm having very good results UX wise event at 200ms
Will push the changes in some time, let me know what you think.

```

function throttle (callback, limit) {
var wait = false; // Initially, we're not waiting
return function () { // We return a throttled function
if (!wait) { // If we're not waiting
callback.call(); // Execute users function
wait = true; // Prevent future invocations
setTimeout(function () { // After a period of time
wait = false; // And allow future invocations
callback.call();
}, limit);
}
}
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants