使用匿名函数在回调函数中正确访问JS循环变量

有时候，需要以不同的参数调用某个URL，并且在回调函数中仍然可以访问正在使用的参数，这时候，需要使用闭包保存当前参数，否则，当回调函数执行时，之前的参数很可能早已被修改为最后一个参数了。具体见代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>关键词搜索</title>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

     $(document).ready(function() {

         var index;

         var searchKeywords = ['一次', '一场', '举行'];

         var result = '第一种方式: <br/>';

         for (index=0; index<3; index++) {

              var keyword = searchKeywords[index];

              $.ajax({

                    url: 'servlets/KeySearchServlet',

                    data: { 'keywords': keyword },

                    dataType: 'text',

                    timeout: 60000,

                    success: function(data) {

                        result += 'index: ' + index + ', keyword: ' + keyword + '<br/>';

                        $('#resultRegion').html(result);

                        // output unexpected:

                            // index: 3, keyword: 举行

                            // index: 3, keyword: 举行

                            // index: 3, keyword: 举行

                    }

             });

         }

         var result2 = '第二种方式: <br/>';

         for (var index2=0; index2<3; index2++) {

             (function(index2) {

                 var keyword = searchKeywords[index2];

                 $.ajax({

                        url: 'servlets/KeySearchServlet',

                        data: { 'keywords': keyword },

                        dataType: 'text',

                        timeout: 60000,

                        success: function(data) {

                            result2 += 'index: ' + index2 + ', keyword: ' + keyword + '<br/>';

                            $('#resultRegion2').html(result2);

                            // output the expectation result

                            // index: 0, keyword: 一次

                            // index: 1, keyword: 一场

                            // index: 2, keyword: 举行

                        }

                  });

             })(index2);

         }

     });

</script>

<style type="text/css">

     #result {

        float: left;

        margin: 20px 50px;

     }

     #resultRegion, #resultRegion2 {

        overflow-y: auto;

        border: 3px outset #f58220;

        width: 500px;

        height: 100px;

        padding: 10px 10px 10px 30px;

        font-size: 11pt;

        /* Gecko browsers */

        -moz-border-radius: 5px;

        /* Webkit browsers */

        -webkit-border-radius: 5px;

        /* W3C syntax - likely to be standard so use for future proofing */

        border-radius:10px;

     }

</style>

</head>

<body>

     <div id="result">

          <p id="searchTip"> 结果对比: </p>

          <div id="resultRegion">

          </div>

          <div id="resultRegion2">

          </div>

     </div> 

</body>

</html>

结果：

巴特西

使用匿名函数在回调函数中正确访问JS循环变量

最新文章

热门文章