js節流函數中的參數傳遞

以下內容，都是本人自己思考所得，不免存在很多問題，歡迎大家指正或者提供更好的解決方法。

在開發中，遇到這樣一個問題：拍攝地點列表，用戶如果在短時間內多次點擊同一個地點時，將會添加多個同名地點。

很顯然，這不是我們想要的結果。然后就上網搜了一下，知道了一個新的概念，函數節流（在這里，這個理解是錯誤的，應該是函數去抖，這個后面再說）。
在這里主要參照了博客園謙行的這篇文章：Javascript函數節流  

這邊文章主要講述了無參數函數的節流，並提供了兩種實現方式。而我在這里想要說的是這實際開發中，我遇到的含參數節流問題以及這一過程中產生的其他問題。

首先，先說明含參函數的傳遞方式：1.構造匿名函數 2.參數和方法分開傳遞 （js 把函數作為參數傳遞給另一個方法）

在這里，我也按照謙行的兩種實現方式來分別說明：

第一種方式：

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.apply(context);
    }, 500);
 }

這里很容易看出，構造匿名函數的方法是不可取的，因為每回調用匿名函數，tid的值都是undefined，不能達到節流的目的。

onclick="throttle(function() {resizehandler('a','b');},window)"

如果直接將值與參數分開傳遞，需要重寫throttle的方法定義，而且這樣操作達不到節流函數復用的目的。我自己思考的處理方式如下（這里直接使用了arguments,目的是達到了，不知道會不會有其他影響）：

<div class="container" id="div1" onclick="test('a','b')"></div>
  <script>
  function test() {
      throttle(resizehandler,window,arguments)
  }
  function throttle(method, context,parameters) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.apply(context,parameters);
    }, 500);
  }
  var n = 0;
  function resizehandler(name, title) {
    console.log(++n);
    console.log(name);
    console.log(title);
  }

第二種實現方式：

function throttle(method, delay) {
    var timer = null;
    return function() {
      var context = this,
        args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        method.apply(context, args);
      }, delay);
    }
  }

因為該方法使用了函數句柄，可以通過構造匿名函數的方式來傳遞參數，不過也正是由於這一原因的影響，導致在事件綁定上有一定區別。

document.getElementById('div').onclick = throttle(function() {
    resizehandler('a','b');
  }, 500);

上面代碼所示的綁定方法是可行的，但直接onclick = "throttle(function() {resizehandler('a','b');}, 500)";是不可行的，返回的函數沒有被調用，如果改成onclick = "throttle(function() {resizehandler('a','b');}, 500)()",函數被調用了，但是沒達到節流的目的。具體原因，我也不是太懂，希望有人能夠指教。

當然將函數和參數分開傳遞，也是能夠實現的，與前一種方式沒有太大區別，大家可以根據實際情況來使用。

最后，在實現的過程中，又發現了一個新的名詞叫函數去抖，根據定義來說，前面我們所提到的內容應該都是函數去抖，不過細致的也沒見多大區分，大家有興趣的可以去看這篇文章：JS魔法堂：函數節流（throttle）與函數去抖（debounce）