How to use realtime function and debounce both in an event callback?

Question

As the title, How can I run realtime function and debounce function in the same callback function such as

input.addEventListener('keyup', function () {
  realtimeFn()
  _.debounce(debounceFn, 1000) // how to code here...
})

function realtimeFn () { console.log(1) }


function debounceFn () { console.log(2) }

I want to log 1 every time and log 2 after all keyup and 1 second.

@Teemu I run lodash to test, but both lodash.js and underscore.js is right — quietcoder, Aug 08 '17 at 14:17
Make sure to be precise, lodash and underscore are not the same thing... Although they are very similar, it's important to understand that they have differences. — Salketer, Aug 08 '17 at 14:19

score 3 · Accepted Answer · answered Aug 08 '17 at 14:18

3

Debounce returns a debounced function, you should be using that returned function instead of calling debounce. This code sample should do the thing.

var debounced = _.debounce(debounceFn, 1000) ;
input.addEventListener('keyup', function () {
  realtimeFn();
  debounced();
})

function realtimeFn () { console.log(1) }


function debounceFn () { console.log(2) }

answered Aug 08 '17 at 14:18

Salketer

14,263
2
30
58

Thank you, and it seems that I need to read the source code of lodash.throttle and underscore.throttle. – quietcoder Aug 08 '17 at 14:22
Depends on what are your needs exactly. Read https://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function – Salketer Aug 08 '17 at 14:25

score -1 · Answer 2 · edited May 01 '18 at 21:43

-1

I suggest to use setInterval() and setTimeout():

input.addEventListener('keyup', function() {
    setInterval("realtimeFn()", 1000);
setTimeout("debounceFn()", 1000);
});

edited May 01 '18 at 21:43

halfer

19,824
17
99
186

answered Aug 08 '17 at 14:24

Tiefan Ju

510
3
14

How to use realtime function and debounce both in an event callback?

2 Answers2