脚本中的JavaScript匿名函数

JavaScript anonymous functions in script

本文关键字:函数 JavaScript 脚本      更新时间:2023-09-26
<?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>

在我的代码中,我使用了两个嵌套的匿名函数,就像这样:

(function(i) {
  (function(cc) {
  })(cc);
})(i);

我一直有一些问题,这似乎是我的程序中的一个错误,其中"objj[cc].idtabletdetails;"的值没有被正确读取,这导致我将它拉出到这一行的变量中:

var tIDTabletdetails = objj[cc].idtabletdetails;

一旦我将值拉出到tIDTabletdetails程序运行良好。当我试图引用"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"answers"cc"的值,或者匿名函数是否应该以不同的方式编码。

最好捕获您感兴趣的值,而不是迭代器,所以…

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

…然而,在看了你的代码之后,我强烈推荐像Backbone或Ember这样的MV*框架,如果你还没有检查过它们,你应该检查一下,它将极大地简化你的生活!

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

我没有完全修改你的代码,但是我不认为在每次循环迭代时将你的整个代码包装在一个自执行的函数中是保留循环索引的最干净的方法。

您可以使用以下方法:

//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...
}