一、對于前端

防止重復(fù)點擊按鈕：可以采用一點擊一次后讓按鈕置灰，暫時不可以用，響應(yīng)結(jié)束后再可以用。
防止重復(fù)提交請求：可以采用請求隊列的方式，每次請求時檢查隊列中有無該請求，有則返回，無則提交，并將該請求添加到隊列，響應(yīng)完畢，將響應(yīng)的請求從隊列中移除。

二、安全方面，需要前后端協(xié)同處理

推薦您看一下說說API的防重放機(jī)制

目前我們公司就采用這些方式！

http://www.alloyteam.com/2012...

使用rxjs的debounceTime操作符

函數(shù)節(jié)流思路

加個開關(guān)就行了,點擊請求的時候判斷開關(guān)，

可以參考redux-saga的思路，takeLatest

如果是移動端的話，我想到了一個比較簡單的方法，你可以設(shè)置兩個按鈕，第一個按鈕加上點擊事件，并且默認(rèn)顯示，第二個按鈕不加事件，當(dāng)用戶點擊之后請求接口馬上隱藏第一個按鈕，并顯示第二個按鈕。如果是基于vue開發(fā)，可以用v-show去實現(xiàn)這個效果，雖然這樣可以避免用戶多次請求數(shù)據(jù)接口，但是這方法還是沒有大神Xeira和iboy的規(guī)范。。。

想了一個侵入性不是很強(qiáng)的的方式，現(xiàn)在大部分項目或庫都基于Promise封裝的ajax請求，Promise的安全性問題又使得自身的狀態(tài)無法在外部改變。

我的思路是使用一個warp高階函數(shù)，兜所有請求，如果是在隊列最后一個請求成功了才算成功，同時清除隊列。

[請求1， 請求2， 請求3， 請求4]

function warp(ajax) {
  let stack = []
  return function () {
    let req
    let self = this
    let length = stack.length + 1
    let p = new Promise((reslove, reject) => {
      req = ajax.call(self, ...arguments).then(data => {
        if (stack.length === length) {
          // 最新的請求 就是你
          stack = []
          reslove(data)
        } else {
          // 如果是過期的請求就reject 或者隨意
          reject('old request')
        }
      }) 
    })
    stack.push(req)
    return p
  }
}
// 假定一個普通的ajax請求
let ajax = () => {
    return new Promise((reslove, reject) => {
        setTimeout(() => reslove('success'), 3000)
    })
}
// 封裝過的特殊ajax請求
let getSomeAjax = warp(ajax)

// 發(fā)起請求
getSomeAjax().then(console.log, console.err) 
getSomeAjax().then(console.log, console.err)

設(shè)置一個id，每次開始ajax請求前更新這個id并在scope中保留副本，并取消前次ajax請求。請求結(jié)束后查詢該id是否與本次請求的id對應(yīng)，否的話就拋棄本次response
節(jié)流函數(shù)適合避免短時間內(nèi)多次請求，但是并不能保證請求返回后按順序更新UI

請求的時候加個時間戳，然后比較就好了吧。