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

最新推荐文章于 2021-04-28 10:24:35 发布

影儿

最新推荐文章于 2021-04-28 10:24:35 发布

阅读量2.4k

点赞数 2

分类专栏：编程语言文章标签： javascript 回调访问当前参数匿名函数

本文链接：https://blog.csdn.net/lovesqcc/article/details/20869735

版权

编程语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

有时候，需要以不同的参数调用某个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>

结果：