accessing whole string instead of part of string

Question

I tried to write one JavaScript jQuery program that say a number. It represents some records I recorded before. I have one problem. When I type a number, it plays only the last record (the last char of the string). It is the program:

function recognizer (num) {            
        var result = '#';
            switch(num) {
            case '0':
                result += 'zero';
                break;
            case '1':
                result += 'one';
                break;
            case '2':
                result += 'two';
                break;
            case '3':
                result += 'three';
                break;
            case '4':
                result += 'four';
                break;
            case '5':
                result += 'five';
                break;
            case '6':
                result += 'six';
                break;
            case '7':
                result += 'seven';
                break;
            case '8':
                result += 'eight';
                break;
            case '9':
                result += 'nine';
                break;
        }

        return result;
    }     

$('#submit').click(function() {

    var num = $('#number').val();

    var delay = 1000;

    for (var i = 0; i < num.length; i++) {
        var indexNum = recognizer(num[i]);
        setTimeout(function () {
            $(indexNum).trigger('play');
        }, delay);
        delay += 1000;
    }

});

That switch statement is an abomination. Why not use an object instead? — mustachioed
– mustachioed, Commented Feb 7, 2018 at 19:44
When I type a number, it plays only the last record -- what do you mean? — PeterKA
– PeterKA, Commented Feb 7, 2018 at 19:46
Your title is completely useless. It should contain some part of the problem. — random_user_name
– random_user_name, Commented Feb 7, 2018 at 20:02

alex · Accepted Answer · 2018-02-07 20:00:38Z

2

The real problem is you have a closure, and when the function is executed, the value of indexNum has been set to the final number. You can break the closure with let or use a Standard-Closure-Breaking-Pattern.

setTimeout((function (indexNum) {
     return function() { $(indexNum).trigger('play'); };
})(indexNum), delay);

Also, your recognizer could be compacted. Assuming num is always a single character string, which it appears it is meant to be given your example.

function recognizer(num) {
   const numberWords = ['zero', 'one', 'two', ...];
   return `#${numberWords[num]}`;
}

edited Feb 7, 2018 at 20:00

answered Feb 7, 2018 at 19:55

alex

492k205 gold badges891 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lmarqs · Accepted Answer · 2018-02-07 19:57:54Z

async functions may cause some trouble...

try to create a new instance of vars for each loop:

    var indexNum = recognizer(num[i]);

    (function (indexNum, delay) {
        setTimeout(function () {
            $(indexNum).trigger('play');
        }, delay);
    })(indexNum, delay);

var num = "123456789";

var delay = 1000;

for (var i = 0; i < num.length; i++) {
  var indexNum = recognizer(num[i]);

  // Correct
  (function(indexNum, delay) {
    setTimeout(function() {
      document.write("Correct ", indexNum, " ", delay, "<br>");
    }, delay);
  })(indexNum, delay);

  // Weird
  setTimeout(function() {
    document.write("Weird ", indexNum, " ", delay, "<br>");
  }, delay);

  delay += 1000;
}




function recognizer(num) {
  var labels = [ "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" ];
  return "#" + labels[Number(num)];
}

Collectives™ on Stack Overflow

accessing whole string instead of part of string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related