クロージャの実装を教えていただきたいです。

var current=0;とvar num=0;をslider関数に入れて動作させるために、slider()内でクロージャ作って関数を返し、返ってきた関数をイベントから呼ぶためのコードを書いています。

以下のようにイベントと処理を分けて実装するためにはクロージャを用いるとどのようにコードを書けば良いかを教えていただけると幸いです。

$objA.on('click', function() {
funcA();
});
$objB.on('click', function() {
funcB();
});
.
.
.
function funcA() {
// objAの処理
}
function funcB() {
// objBの処理
}

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="wrapper">
14    <div class="slider-wrap">
15        <div class="slider-area">
16            <ul class="slider-list clearfix">
17                <li><img src="img/1.jpg" alt=""></li>
18                <li><img src="img/2.jpg" alt=""></li>
19                <li><img src="img/3.jpg" alt=""></li>
20                <li><img src="img/4.jpg" alt=""></li>
21            </ul>
22            <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
23            <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
24        </div>
25    </div>
26</div>
27<script type="text/javascript" src="js/jquery.js"></script>
28<script type="text/javascript">
29<!doctype html>
30<html>
31<head>
32<meta charset="UTF-8">
33<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
34<meta name="format-detection" content="telephone=no">
35<title></title>
36<link rel="stylesheet" href="css/reset.css">
37<link rel="stylesheet" href="css/base.css">
38<link rel="stylesheet" href="css/style.css">
39</head>
40<body>
41<div class="wrapper">
42    <div class="slider-wrap">
43        <div class="slider-area">
44            <ul class="slider-list clearfix">
45                <li><img src="img/1.jpg" alt=""></li>
46                <li><img src="img/2.jpg" alt=""></li>
47                <li><img src="img/3.jpg" alt=""></li>
48                <li><img src="img/4.jpg" alt=""></li>
49            </ul>
50            <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
51            <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
52        </div>
53    </div>
54</div>
55<script type="text/javascript" src="js/jquery.js"></script>
56<script type="text/javascript">
57/**
58  * （説明）
59  * @type {number} current ←クリックしたときの初期値
60  * @type {number} num ←要素の幅を取得した後に幅の数値を入れる変数
61  * @type {string} numLength ←画像の位置情報を取得するための要素の個数
62  * @type {number} numWidth ←要素の幅
63  *
64  * （関数）
65  * @param {flg} flg : flg
66**/
67$(function(){
68  $('.next').on('click',function(){
69    slider();
70  });
71  $('.prev').on('click',function(){
72    slider();
73  });
74
75  function slider(){
76    var current=0;
77    var num=0;
78　　
79    return function slideNext(){
80      var numWidth=$('.slider-list img').eq(current).width();
81      var numLength=$('.slider-list img').length;
82      return current++;
83
84      if(current<numLength){
85        num-=numWidth;
86      }else{
87        num=0;
88        current=0;
89      }
90      $('.slider-list').animate({left:num});
91    }
92
93    return function slidePrev(){
94      var numWidth=$('.slider-list img').eq(current).width();
95      var numLength=$('.slider-list img').length;
96      return current--;
97      if(current>=0){
98        num+=numWidth;
99      }else{
100        num=-$('.slider-list img:not(:last)').map(function(){
101          return $(this).width();
102        }).get().reduce((x,y)=>x+y);
103        current=numLength-1;
104      }
105      $('.slider-list').animate({left:num});
106    }
107
108  }
109});
110</script>
111</body>
112</html>
113</script>
114</body>
115</html>

css
1.slider-wrap {
2    width: 600px;
3    padding: 10px;
4    margin: 0 auto;
5    border-radius: 10px;
6    background-color: #DDD;
7    box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
8}
9.slider-area {
10    position: relative;
11    width: 600px;
12    height: 300px;
13    background-color: #FFF;
14    overflow: hidden;
15}
16.slider-list {
17    position: absolute;
18    top: 0;
19    left: 0;
20    width: 2400px;
21    height: 300px;
22}
23.slider-list > li { float: left; }
24.slider-ctrl-btn {
25    position: absolute;
26    top: 50%;
27    width: 30px;
28    height: 30px;
29    margin-top: -15px;
30    cursor: pointer;
31    border-radius: 15px;
32    background-color: rgba(255, 255, 255, 0.5);
33}
34.slider-ctrl-btn.prev { left: 30px; }
35.slider-ctrl-btn.next { right: 30px; }

動作するコードが以下のコードです。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="wrapper">
14    <div class="slider-wrap">
15        <div class="slider-area">
16            <ul class="slider-list clearfix">
17                <li><img src="img/1.jpg" alt=""></li>
18                <li><img src="img/2.jpg" alt=""></li>
19                <li><img src="img/3.jpg" alt=""></li>
20                <li><img src="img/4.jpg" alt=""></li>
21            </ul>
22            <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
23            <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
24        </div>
25    </div>
26</div>
27<script type="text/javascript" src="js/jquery.js"></script>
28<script type="text/javascript">
29/**
30  * （説明）
31  * @type {number} current ←クリックしたときの初期値
32  * @type {number} num ←要素の幅を取得した後に幅の数値を入れる変数
33  * @type {string} numLength ←画像の位置情報を取得するための要素の個数
34  * @type {number} numWidth ←要素の幅
35  *
36  * （関数）
37  * @param {flg} flg : flg
38**/
39$(function(){
40  var current=0;
41  var num=0;
42  $('.next').on('click',function(){
43    slider(1);
44  });
45  $('.prev').on('click',function(){
46    slider(2);
47  });
48  function slider(flg){
49    if(flg==1){
50      var numWidth=$('.slider-list img').eq(current).width();
51      var numLength=$('.slider-list img').length;
52      current++;
53      if(current<numLength){
54        num-=numWidth;
55      }else{
56        num=0;
57        current=0;
58      }
59      $('.slider-list').animate({left:num});
60    }else if(flg==2){
61      var numWidth=$('.slider-list img').eq(current).width();
62      var numLength=$('.slider-list img').length;
63      current--;
64      if(current>=0){
65        num+=numWidth;
66      }else{
67        num=-$('.slider-list img:not(:last)').map(function(){
68          return $(this).width();
69        }).get().reduce((x,y)=>x+y);
70        current=numLength-1;
71      }
72      $('.slider-list').animate({left:num});
73    }
74  }
75});
76</script>
77</body>
78</html>

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  var slideNext, slidePrev;
3
4  $('.next').on('click',function(){
5    slideNext();
6  });
7  $('.prev').on('click',function(){
8    slidePrev();
9  });
10
11  (function(){
12    var current=0;
13    var num=0;
14
15    slideNext=function slideNext(){
16      略
17    }
18
19    slidePrev=function slidePrev(){
20      略
21    }
22  })();
23});