使用匿名函数在回调函数中正确访问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>

 



       结果：


       







 






		

		
posted @ 
2014-03-09 22:43 
琴水玉 
阅读(411) 
评论(0) 
编辑 
收藏 
举报