<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lucas Mórawski</title>
    <description>The latest articles on DEV Community by Lucas Mórawski (@inspmoore).</description>
    <link>https://dev.to/inspmoore</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F173275%2Fde776eaf-2e80-489b-b2c1-d335662ba9ed.png</url>
      <title>DEV Community: Lucas Mórawski</title>
      <link>https://dev.to/inspmoore</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/inspmoore"/>
    <language>en</language>
    <item>
      <title>ABC of Polling in JS</title>
      <dc:creator>Lucas Mórawski</dc:creator>
      <pubDate>Sat, 20 Feb 2021 22:58:47 +0000</pubDate>
      <link>https://dev.to/inspmoore/abc-of-polling-in-js-1dfd</link>
      <guid>https://dev.to/inspmoore/abc-of-polling-in-js-1dfd</guid>
      <description>&lt;p&gt;No, not that kind of polling you silly! The JavaScript type, meaning repeatedly calling a given function in some interval of time. Sounds easy? Well, I hate to spoil a good day for you.&lt;/p&gt;

&lt;h2&gt;
  
  
  You don't want Tennet to happen in your code
&lt;/h2&gt;

&lt;p&gt;One might think "What's the big deal here? Just use setInterval!". Not so fast bucko!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;callMe&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// sync stuff&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Aye there!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callMe&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// logs&lt;/span&gt;
&lt;span class="c1"&gt;// [0:01] Aye there! &lt;/span&gt;
&lt;span class="c1"&gt;// [0:02] Aye there! &lt;/span&gt;
&lt;span class="c1"&gt;// [0:03] Aye there! &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;That may look fine for polling a synchronous function. Add a side effect making it asynchronous and we have a completely different story here. An async function may yield its results in a time that is longer than the polling interval.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;calls&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;callMe&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;calls&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;callNo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calls&lt;/span&gt;
  &lt;span class="c1"&gt;// async stuff&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Call #&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;callNo&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callMe&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// logs&lt;/span&gt;
&lt;span class="c1"&gt;// [0:01] Call #1&lt;/span&gt;
&lt;span class="c1"&gt;// [0:03] Call #3&lt;/span&gt;
&lt;span class="c1"&gt;// [0:05] Call #2&lt;/span&gt;
&lt;span class="c1"&gt;// [0:08] Call #4&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is a mess that may lead to some serious errors in your code. We don't have constant time interval between the results. What's more important, the chronology is all screwed up! Chris Nolan would be happy, but we are not!&lt;/p&gt;

&lt;p&gt;To get the calls in the right order we need to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;make a call&lt;/li&gt;
&lt;li&gt;wait for the function to return something&lt;/li&gt;
&lt;li&gt;wait the defined delay time&lt;/li&gt;
&lt;li&gt;go back to the start&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Getting the stuff
&lt;/h2&gt;

&lt;p&gt;Getting the data back can be a bit tricky. In most cases, that polled function returns something interesting. To retrieve this data we need a callback function. We can also attach an event, to allow many callbacks. That is useful, as we may like to stop polling when certain response arrives and conditions are met. Or to feed some other logic with those responses.  &lt;/p&gt;
&lt;h2&gt;
  
  
  Err... what?
&lt;/h2&gt;

&lt;p&gt;Polling can be prone to errors. Especially when we call a function that calls some API on a remote server. Network errors or glitches on the server side may lead to rejecting some of that calls. Yet sometimes we would like to continue polling regardless of errors. Maybe that consequent call will return real and valid data. We should be able to stop polling only when a certain number of failures in a row takes place.&lt;/p&gt;
&lt;h2&gt;
  
  
  Pollinator to the rescue 🐝
&lt;/h2&gt;

&lt;p&gt;I wrote a small, but busy little module you can use to address all those issues and more. Yes, we can be lazy again! Biggest advantages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;very tiny, only 907B (that's right, bytes) minified and gzipped&lt;/li&gt;
&lt;li&gt;you can start, stop and pause anytime you want&lt;/li&gt;
&lt;li&gt;can stop polling when meting a condition based on current and previous returned data&lt;/li&gt;
&lt;li&gt;event based&lt;/li&gt;
&lt;li&gt;handles errors like a champ with configurable number of safe retries&lt;/li&gt;
&lt;li&gt;written in TS!&lt;/li&gt;
&lt;li&gt;Node and browser compatible&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you see a place for it, give it a try! Hope it saves some effort for you. &lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/inspmoore" rel="noopener noreferrer"&gt;
        inspmoore
      &lt;/a&gt; / &lt;a href="https://github.com/inspmoore/pollinator" rel="noopener noreferrer"&gt;
        pollinator
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Lightweight js library to poll any function. Node and browser compatible.
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;p&gt;BTW Feedback is more than welcome!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>polling</category>
      <category>pollinator</category>
      <category>node</category>
    </item>
  </channel>
</rss>
