Why Javascript keep on running even after array finished in pop()

Question

I'm trying to automate some button clicking and data inserting into a webpage by using TamperMonkey. However, even after all the data from the array has been inserted, the javascript keep on clicking on the button. How do I set it so that once the data from the array has been finished inserted, the javascript should stop running. Here's the code, to automate batch input of gift cards into shopify.

// ==UserScript==
// @name         Shopify Gift Card Generator
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Generate Gift Cards from a list
// @author       You
// @grant    GM.getValue
// @grant    GM.setValue
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @match        https://[myshopname].myshopify.com/admin/gift_cards
// @run-at      document-idle

// ==/UserScript==

/* globals $ */

(function() {
    'use strict';

    //add recipient list
    var rec = ["2920469463099",
                 "2920466415675",
            ];

    function generateCard(code){

        if($('button:contains("Issue gift card")') !== "undefined"){

            //click generate gift card
            $('button:contains("Issue gift card")').click();

            //set recipient based on id
            $('#gift_card_customer_id').attr("value", code);

            //select the dollar amount eq(0) = 10, eq(1) = 25, eq(2) = 50, eq(3) = 100
            $('.segmented-control.large li:eq(2) label')[0].click();

            //submit!
            //$('form.new_gift_card')[0].submit();
            $('input[type=submit]').click();

            var success = false;
            function closeWindow(){

                if($('.gift-card-success-heading h2:contains("RM50.00 MYR gift card successfully issued")').length == 1){
                    if ($('#gift-card-issue-errors:contains("There ")').length == 0) {
                        //close the modal and restart!
                        $('a.close-modal').click();
                        console.log('last successful recipient id: ');
                        console.log(GM.getValue('last'));

                        setTimeout(function(){
                            generateCard(rec.pop());
                        }, 750);

                    } else {

                        console.log('generation error. last code:');
                        console.log(GM.getValue('last'));
                        success = false;
                    }
                } else {

                    setTimeout(function(){ closeWindow(); }, 500);
                }
            }

            closeWindow();
            return success;

        } else {
            generateCard(code);
        }
    }

    function begin(){

        //wait for the page to load / not over-request the shopify server
        setTimeout(function(){
            generateCard(rec.pop());


        }, 1500);

    }

    begin();

})();

Any suggestions on how to solve the issue? Thank you.

Answer 1

Don't start the next timer when rec is empty.

if (rec.length > 0) {
    setTimeout(function(){
        generateCard(rec.pop());
    }, 750);
}