आरएक्सजेएस - निष्क्रिय होने पर केवल टाइमर शुरू करें?

Question

मैं एक स्ट्रीम का उपयोग कर रहा हूं जो खिड़की को स्क्रॉल करते समय थ्रॉटल किया जाता है।
थ्रॉटलिंग (जब तक स्क्रॉलिंग तक), यह कंसोल के मानों को छोड़ देता है।

हालांकि, जब धारा खाली है (उपयोगकर्ता नहीं खिड़की स्क्रॉल है) - मैं एक टाइमर में लात करना चाहते हैं हालांकि -। यदि उपयोगकर्ता फिर से स्क्रॉल शुरू होता है - मुझे लगता है कि टाइमर मूल्यों का उत्सर्जन नहीं करना चाहती।

वर्तमान में मैं यह कर रहा हूँ:

const observable = Rx.Observable.fromEvent(window, 'scroll'); 

    const subscriber = observable 
     .throttleTime(300) 
     .map(() => 'throttle') 
     .merge(Rx.Observable.interval(1000).map(() => 'tick')) 
     .subscribe(
      (x) => { 
      console.log('Next: event!', x); 
      }, 
      (err) => { 
      console.log('Error: %s', err); 
      }, 
     () => { 
      console.log('Completed'); 
      }); 

समस्या यह है कि, स्क्रॉल करते हुए है - मैं देख रहा हूँ दोनों "throttle" और "tick" (मैं केवल "थ्रॉटल" देखना चाहिए) दूसरे से इस बात का

Think पीओवी। नौकरी हमेशा चलनी है। अगर मैं स्क्रॉल करता हूं - वह थ्रॉटल स्क्रॉल - नौकरी का आह्वान करना चाहिए। अगर मैं स्क्रॉल नहीं करता - एक टाइमर को लात मारना चाहिए और नौकरी करना शुरू करना चाहिए। (और यदि उपयोगकर्ता फिर से स्क्रॉल करना शुरू करता है तो रोकता है)।

प्रश्न:
मैं कैसे स्क्रॉल नहीं की एक निष्क्रिय समय के बाद एक टाइमर शुरू कर सकते हैं?

PLNKR

Answer 1

मैं इस तरह यह करना चाहते हैं:

const scroll$ = Rx.Observable.fromEvent(window, 'scroll') 
    .throttleTime(300 /* ms */) 
    .publish(); 

scroll$.connect(); 

const subscriber = scroll$ 
    .map(() => 'throttle') 
    .race(Rx.Observable.interval(1000).map(() => 'tick')) 
    .take(1) 
    .repeat() 
    .subscribe(
     (x) => { 
      console.log('Next: event!', x); 
     }, 
     (err) => { 
      console.log('Error: %s', err); 
     }, 
     () => { 
      console.log('Completed'); 
     }); 

यह प्रत्यक्ष है कि पहले का उत्सर्जन करता है जो 1s interval या स्क्रॉल घटना है के लिए एक ही सदस्यता के लिए race() ऑपरेटर का उपयोग करता है। इसके ठीक बाद मैं इसे एक और अंतराल के साथ फिर से शुरू करना चाहता हूं इसलिए मैं take(1).repeat() का उपयोग करता हूं।

मुझे कोदोहराए गए सब्सक्रिप्शन के बीच चलने के लिए एक गर्म अवलोकन करने योग्य भी बदलना पड़ा।

आपका अपडेट किया गया डेमो: https://plnkr.co/edit/sWzSm32uoOQ1hOKigo4s?p=preview

Answer 2

आप debounceTime का उपयोग स्क्रॉल किए बिना अवधि का पता लगाने के कर सकते हैं।

const scroll = Rx.Observable.fromEvent(window, 'scroll') 
    .throttleTime(300) 
    .mapTo(false); 
const noscroll = Rx.Observable.fromEvent(window, 'scroll') 
    .startWith(0) // init with no scroll. 
    .debounceTime(300) // detect no scroll after 300 ms. 
    .mapTo(true); 
scroll.merge(noscroll) 
    .switchMap(e => e ? Rx.Observable.interval(1000).mapTo("Tick!") : Rx.Observable.of("Scroll!")) 
    // start the interval if there was no scroll. Stop the interval if there was a scroll. 
    .subscribe(updateTimer) 

अपने कोड के साथ एक और समस्या, merge का उपयोग कर कि दोनों स्रोतों सदस्यता ली रखेंगे है बजाय मैं switchMap (mergeMap के भाई) कि भीतर नमूदार हर बार एक नई घटना उत्सर्जित होता है करने के लिए सदस्यता का उपयोग, लेकिन यह भी सदस्यता समाप्त पिछले आंतरिक स्रोत अगर स्रोत से एक और घटना उत्सर्जित की जाती है।

पुन: प्रश्न का "एक और पीओवी" हिस्सा: आप नौकरी के साथ switchMap में Rx.Observable.interval(1000) को प्रतिस्थापित कर सकते हैं। स्क्रॉलिंग नौकरी रद्द/सदस्यता रद्द कर देगी (जैसे उत्सर्जित है), यदि कोई और स्क्रॉलिंग नहीं है, तो नौकरी फिर से शुरू हो जाएगी।

Live demo