JavaScript anonymous functions in script

StackOverflow https://stackoverflow.com/questions/16600892

  •  29-05-2022
  •  | 
  •  

문제 

<?php

?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

jTimesheetid = "";
jTimesheetweekending = "";
jPersonnelNo = "";
jLastInsertID = "";
jWorkCodes = "";
tabletdetails = "";

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "php.scripts/timesheet.getsession.php",
    data: { },
    async: false
  }).done(function( msg ) {
    obj = JSON.parse(msg);
    jTimesheetid = obj.timesheetid;
    jTimesheetweekending = obj.timesheetweekending;
    jPersonnelNo = obj.personnelno;
  });

  $.ajax({
  type: "POST",
  url: "php.scripts/buildselect.jobs.php",
  data: { },
  async: false
  }).done(function( msg ) {
    jQuery("#daddtablet").append(msg);
    jQuery("#daddtablet select").css('margin','1px');
    jQuery("#daddtablet select").css('width','200px');
    jQuery("#daddtablet select").css('height','20px');
  });

  $("#baddtablet").click(function() {
    $.ajax({
      type: "POST",
      url: "php.scripts/tablet.add.php",
      data: { jobno: jQuery("#daddtablet select").val() },
      async: false
    }).done(function( msg ) {
      alert( msg );
      window.location.reload();
    });
  });

  $.ajax({
  type: "POST",
  url: "php.scripts/timesheet.getall.php",
  data: { },
  async: false
  }).done(function( msg ) {
    //alert( msg );
    jTablets = JSON.parse(msg);

    for (var i = 0; i < jTablets.length; i++) {
      (function(i) {
        //jQuery("body").append("x");
        jQuery("body").append("<br>");
        jQuery("body").append("<div class=\"wrapperouter\" id=\"tablet"+jTablets[i].idtablets+"\"></div>");
        jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"jobno\" id=\"jobno_tablet"+jTablets[i].idtablets+"\">"+jTablets[i].jobno+"</div>");
        jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"jobname\" id=\"jobname_tablet"+jTablets[i].idtablets+"\"><span>JobName:</span>"+jTablets[i].nname+"</div>");
        jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"jobclient\" id=\"jobclient_tablet"+jTablets[i].idtablets+"\"><span>JobClient:</span>"+jTablets[i].companyname+"</div>");
        jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"weekending\" id=\"weekending_tablet"+jTablets[i].idtablets+"\"><span>WeekEnding:</span>"+jTimesheetweekending+"</div>");
        jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"tablewrapper\" id=\"tablewrapper_tablet"+jTablets[i].idtablets+"\"></div>");

        var jHTML = "<div class=\"headercolumn0\" id=\"headercolumn0_tablet"+jTablets[i].idtablets+"\"> <span>Dash</span> </div> <div class=\"headercolumn1\" id=\"headercolumn1_tablet"+jTablets[i].idtablets+"\"> <span>Description</span> </div> <div class=\"headercolumn2\" id=\"headercolumn2_tablet"+jTablets[i].idtablets+"\"> <span>Work Code</span> </div> <div class=\"headercolumn3\" id=\"headercolumn3_tablet"+jTablets[i].idtablets+"\"> <span>M</span> </div> <div class=\"headercolumn4\" id=\"headercolumn4_tablet"+jTablets[i].idtablets+"\"> <span>TU</span> </div> <div class=\"headercolumn5\" id=\"headercolumn5_tablet"+jTablets[i].idtablets+"\"> <span>W</span> </div> <div class=\"headercolumn6\" id=\"headercolumn6_tablet"+jTablets[i].idtablets+"\"> <span>T</span> </div> <div class=\"headercolumn7\" id=\"headercolumn7_tablet"+jTablets[i].idtablets+"\"> <span>F</span> </div> <div class=\"headercolumn8\" id=\"headercolumn8_tablet"+jTablets[i].idtablets+"\"> <span>SA</span> </div> <div class=\"headercolumn9\" id=\"headercolumn9_tablet"+jTablets[i].idtablets+"\"> <span>SU</span> </div> <div class=\"headercolumn10\" id=\"headercolumn10_tablet"+jTablets[i].idtablets+"\"> <span>T</span> </div> <div class=\"headercolumn11\" id=\"headercolumn11_tablet"+jTablets[i].idtablets+"\"> <span>DEL</span> </div>";

        jQuery("#tablewrapper_tablet"+jTablets[i].idtablets).append(jHTML);

        /*********************************************/
        // cycle through the details
        $.ajax({
        type: "POST",
        url: "php.scripts/tablet.getdetails.php",
        data: { tabletid: jTablets[i].idtablets },
        async: false
        }).done(function( msgg ) {
          objj = JSON.parse( msgg );

          for (var cc = 0; cc < objj.length; cc++) 
          {
            (function(cc) {
              console.log(objj[cc].idtabletdetails);
              var tIDTabletdetails = objj[cc].idtabletdetails;

              jHTML = "<div class=\"column0\"><input type=\"text\" value=\""+objj[cc].dash+"\" /></div> \
              <div class=\"column1\"><input type=\"text\" value=\""+objj[cc].description+"\" /></div> \
              <div class=\"column2\"><input type=\"text\" value=\""+objj[cc].workcode+"\" /></div> \
              <div class=\"column3\"><input type=\"number\" value=\""+objj[cc].m+"\" /></div> \
              <div class=\"column4\"> <input type=\"number\" value=\""+objj[cc].tu+"\" /></div> \
              <div class=\"column5\"> <input type=\"number\" value=\""+objj[cc].w+"\" /></div> \
              <div class=\"column6\"><input type=\"number\" value=\""+objj[cc].t+"\" /></div> \
              <div class=\"column7\"><input type=\"number\" value=\""+objj[cc].f+"\" /></div> \
              <div class=\"column8\"><input type=\"number\" value=\""+objj[cc].sa+"\" /></div> \
              <div class=\"column9\"> <input type=\"number\" value=\""+objj[cc].su+"\" /></div> \
              <div class=\"column10\"> <input type=\"number\" value=\"\" /></div> \
              <div id=\"tablet"+jTablets[i].idtablets+"row"+cc+"\" class=\"column11\"><span>x</span> </div>";

              jQuery("#tablewrapper_tablet"+jTablets[i].idtablets).append(jHTML);
              jQuery("#tablet"+jTablets[i].idtablets+"row"+cc).html(tIDTabletdetails);

              jQuery("#tablet"+jTablets[i].idtablets+"row"+cc).on('click', function()
              {
                //console.log(jTablets[i].idtablets);
                //console.log(objj[cc].idtabletdetails);

                $.ajax({
                type: "POST",
                url: "php.scripts/tablets.deleterow.php",
                data: { 
                  idtablets: jTablets[i].idtablets,
                  idtabletdetails: tIDTabletdetails
                },
                async: false
                }).done(function( msg ) {
                  alert( msg );
                  window.location.reload();
                });
              });
            })(cc);   

          }
        });
        // end cycle through the details
        /**********************************************/

        jHTML = "<div style=\"clear: both;\"><input class=\"botbutton\" type=\"button\" id=\"addrowtablet"+jTablets[i].idtablets+"\" value=\">>\" /> \
        <input class=\"botbutton\"  type=\"button\" id=\"savetablet"+jTablets[i].idtablets+"\" value=\"save\" /> \
        <input class=\"botbutton\"  type=\"button\" id=\"deletetablet"+jTablets[i].idtablets+"\" value=\"delete\" /></div>";

        jQuery("#tablet"+jTablets[i].idtablets).append(jHTML);

        //add row to tablet
        jQuery("#addrowtablet"+jTablets[i].idtablets).on('click', function()
        {
          $.ajax({
          type: "POST",
          url: "php.scripts/tablet.addrow.php",
          data: { idtablets: jTablets[i].idtablets },
          async: false
          }).done(function( msg ) {
            //alert( msg );
            window.location.reload();
          });
        });

        //save tablet
        jQuery("#savetablet"+jTablets[i].idtablets).on('click', function()
        {
            alert("alertsepy2...");
        });

        //delete tablet
        jQuery("#deletetablet"+jTablets[i].idtablets).on('click', function()
        {
          console.log("jTablets[i].jobno: "+jTablets[i].jobno);
          console.log(jTablets[i].idtablets);

          $.ajax({
          type: "POST",
          url: "php.scripts/tablet.delete.php",
          data: { idtablets: jTablets[i].idtablets },
          async: false
          }).done(function( msg ) {
            //alert( msg );
            window.location.reload();
          });
        });

      })(i);
    }
  }); 
});
</script>
</head>
<body>
<div id="addtablet" style="border: 1px solid black; overflow: hidden;">
<div id="daddtablet" style="float: left; padding: 0px;"></div><input type="button" id="baddtablet" value="add.tablet" style="margin: 0px; height: 22px; padding: 0px;" />
</div>
</body>

In my code I am using two nested anonymous functions like in the fashion of:

(function(i) {
  (function(cc) {

  })(cc);
})(i);

I have been having some problem that seems like a bug in my program where the value of "objj[cc].idtabletdetails;" is not being read properly which lead me to pull it out into a variable at this line:

var tIDTabletdetails = objj[cc].idtabletdetails;

Once I pulled the value out to tIDTabletdetails the program is running fine. The problem occured when I tried to reference "objj[cc].idtabletdetails" inside of:

                        jQuery("#tablet"+jTablets[i].idtablets+"row"+cc).on('click', function()
                        {
                            //console.log(jTablets[i].idtablets);
                            //console.log(objj[cc].idtabletdetails);

                            $.ajax({
                            type: "POST",
                            url: "php.scripts/tablets.deleterow.php",
                            data: { 
                                idtablets: jTablets[i].idtablets,
                                idtabletdetails: tIDTabletdetails
                            },
                            async: false
                            }).done(function( msg ) {
                                alert( msg );
                                window.location.reload();
                            });
                        });

I am wondering if maybe there is a better way of retaining the values of "i" and "cc" or if perhaps the anonymous functions should be coded in a different way.

Thanks in advance...

도움이 되었습니까?

해결책

It would be better to trap the value your interested in, rather than the iterator, so...

for (var i=0...) {
    (function() {
    })(data[i])
}

...however, after looking at your code I highly recommend an MV* framework like Backbone or Ember, if you haven't checked them out yet you should, it would greatly simplify your life!

http://backbonejs.org/ http://emberjs.com/

다른 팁

I have not revised your code entirely, however I dont think wrapping your whole code in a self-executing function at each loop iteration is the cleanest way to retain the loop index.

You could use the following approach instead:

//create a factory function to which you can pass the loop index
//and which returns another function that's using the index value
function createLogIndexFn(index) {
    return function () {
        console.log(index);
    };
}

var i = 0,
    logFunctions = [];

for (; i < 10; i++) {
    logFunctions.push(createLogIndexFn(i)); //pass index to factory fn
}

for (i = 0; i < 10; i++) {
    logFunctions[i](); //0, 1, 2, 3, 4...
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top