Javascript 'Dot Dot Dot' While Calculating

Question

I have a function to display dot dot dot in a popup window while generating a report. I want to display the text:

Generating Report. Generating Report.. Generating Report...

...repeat, until the report is ready. So far I've only been able to get the three dots in the popup without the other text. Here is my code snippet:

on(link, "click", function(){

          var dots = window.setInterval( function() {
            var wait = document.getElementById("reportLink");
            if ( wait.innerHTML.length > 2) 
                wait.innerHTML = "";
            else 
                wait.innerHTML += ".";
            }, 400);

      domAttr.set(dom.byId("reportLink"), "innerHTML", dots);

I tried this but it didn't work:

domAttr.set(dom.byId("reportLink"), "innerHTML", "Generating Report" + dots);

Would be useful to see this in a jsFiddle or something similar. It's hard to know how this code is working and what's happening behind the scenes in the convenience `dom` methods and so on. — Whothehellisthat, Mar 08 '17 at 20:43

score 0 · Answer 1 · answered Mar 08 '17 at 20:49

0

Try this:

var dots = window.setInterval( function() {
   var wait = document.getElementById("reportLink");
   if ( wait.innerHTML.length > 19) 
       wait.innerHTML = "";
   else 
       wait.innerHTML += ".";
   }, 400);

var text = "Generating Report" + dots;
domAttr.set(dom.byId("reportLink"), "innerHTML", text);

When you check the length you need to include the length of 'Generating report'.

answered Mar 08 '17 at 20:49

user7491506

186
1
3

`dots` is just a reference to `setInterval` and won't return a "dots" string. – Michael L. Mar 08 '17 at 20:54
oops, my bad. I missed that – user7491506 Mar 08 '17 at 20:58

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

The function you're passing to setInterval is directly manipulating the dom element instead of returning a value (which wouldn't work anyway), so you "Generating Report" + dots won't work since dots is just a reference to the setInterval function. Instead, you need to modify your setInterval function using something like this (untested since I'm not sure what JS library/framework you're using):

var dots = window.setInterval( function() {
    var wait = document.getElementById("reportLink"),
               msg = "Generating Report",
               msgLen = msg.length;

    // Initialize to msg if blank
    wait.innerHTML = (wait.innerHTML === "") 
        ? msg 
        : wait.innerHTML; 

    if (wait.innerHTML.length >= (msgLen + 2))
        wait.innerHTML = msg;
    else 
        wait.innerHTML += ".";
}, 400);

Instead of initializing and testing your message by empty string, this uses the actual message you want to show. I also made the number of dots configurable by variable instead of using a "magic number".

[EDIT 1] Make sure you remove this line (and any derivatives): domAttr.set(dom.byId("reportLink"), "innerHTML", dots);

The function you're passing to setInterval is doing all the work.

[EDIT 2: Fixed the excessive dots on first run by initializing to msg if the reportLink element is empty.]

edited May 23 '17 at 12:31

Community

1
1

answered Mar 08 '17 at 20:52

Michael L.

620
3
17

Hey that works! Thanks. However, when I first click the link it displays "16.........." before it displays "Generating Report" – Bill Hambone Mar 08 '17 at 20:56
*dots* has the value returned by calling *setInterval*, it's not a reference to the function itself. – RobG Mar 08 '17 at 20:59
OK. I changed dots to setInterval in the domAttr.set line. It displays "function setInterval{}" before "Generating Reports..." – Bill Hambone Mar 08 '17 at 21:05
If you still have this line: `domAttr.set(dom.byId("reportLink"), "innerHTML", dots);` remove it. The function being passed to `setInterval` is doing all the work. – Michael L. Mar 08 '17 at 21:12
Excellent! Thank you. It's a quibble, but is there a way to remove the underline from the text? It's a hyperlink before it's clicked. – Bill Hambone Mar 08 '17 at 21:16
You're welcome - glad it helped! Don't forget to mark the answer as accepted ;) You can use CSS to remove the underline. I would need to see your markup to give an exact answer but something like: `#link_id {text-decoration: none;}` should do it, assuming the link has an id of 'link_id'. Of course, you can use any CSS selector that applies to the link. – Michael L. Mar 08 '17 at 21:21
I added another edit to prevent it from having a bunch of dots on first run by initializing `reportLink` element to the value of `msg` if it's empty. – Michael L. Mar 08 '17 at 21:47

score 0 · Answer 3 · answered Mar 08 '17 at 21:10

maybe this?

var wait = document.getElementById("reportLink");
var loop = 0;
var text = "Generating Report";
window.setInterval( function() {
    if ( loop > 2) {
        wait.innerHTML = text;
        loop = 0
    } else {
        wait.innerHTML += ".";
        loop++
    }
}, 400);

Javascript 'Dot Dot Dot' While Calculating

3 Answers3