你的位置:首页 > 新闻动态 > 行业新闻
联系我们

微信小程序如何避免多次点击?

2018/7/28 22:01:56      点击:
在使用小程序的时分,假如点击很屡次就会有可能导致页面假死乃至溃散。那么微信小程序怎么防止屡次点击呢?

  最近听产品司理常说,用户点击某个小程序按钮屡次,后台还没处理完导致多笔记载生成,咱们需求在用户点击后跳转到一个新的页面,其实这根本不是跳页问题,是程序问题,所以咱们要尝试着防止屡次点击。

  以前偷闲的时分,在前端咱们可能会这么处理:

  var getUserDataFlag=false;

  getUserData() {

  if (getDataFlag) {

  return;

  }

  getDataFlag=true;

  $.ajax({

  url: '/xxx/getUser',

  success: () {

  getUserData=false;

  //todo

  },

  error: () {

  getUserData=false;

  }

  })

  }

  //当小程序接口许多的时分,咱们的代码就变成这样

  var getUserAssetFlag=true;

  getUserAsset() {

  if (getDataFlag) {

  return;

  }

  getDataFlag=true;

  $.ajax({

  url: '/xxx/getUserAsset',

  success: () {

  getUserAssetFlag=false;

  //todo

  },

  error: () {

  getUserAssetFlag=false;

  }

  })

  }

  上面的比如你会发现,当接口越来越多,保护恳求状态的变量将会越来越多,并且当存在依靠时,保护成本更高,也更简单犯错。

  怎么优雅地处理这样的问题,其实小程序封装一下恳求就能简单又能主动地处理这个问题。

  下面咱们以微信小程序恳求后台数据为例解说:

  import {isObject} from 'https://www.huoyuandl.com/xiaochengxu/util'

  let Promise=require('https://www.huoyuandl.com/libs/bluebird.min')

  let requestList={} //api恳求记载

  // 将当时恳求的api记载起来

  export addRequestKey (key) {

  requestList[key]=true

  }

  // 将恳求完结的api从记载中移除

  export removeRequestKey (key) {

  requestList[key]

  }

  //当时恳求的api是否已有记载

  export hitRequestKey (key) {

  return requestList[key]

  }

  // 获取串行恳求的key,便利记载

  export getLockRequestKey (data) {

  if (!isObject(data)) {

  return data

  }

  let ajaxKey='lockRequestKey:'

  try {

  ajaxKey +=JSON.stringify(data)

  } catch (e) {

  ajaxKey +=data

  }

  return ajaxKey

  }

  //依据恳求的地址,恳求参数组装成api恳求的key,便利记载

  export getRequestKey (data) {

  if (!isObject(data)) {

  return data

  }

  let ajaxKey='Method: ' + data.method + ',Url: ' + data.url + ',Data:'

  try {

  ajaxKey +=JSON.stringify(data.data)

  } catch (e) {

  ajaxKey +=data.data

  }

  return ajaxKey

  }

  //一切与服务器进行http恳求的出口

  export http (data) {

  if (!isObject(data)) {

  throw Error('ajax恳求参数有必要是json对象: ' + data)

  }

  data.method=(data.method || 'GET').toUpperCase()

  //下面5行是对一切http恳求做防重复恳求处理,后面单独共享原理

  let ajaxKey=getRequestKey(data)

  if (hitRequestKey(ajaxKey)) {

  throw Error('重复提交恳求:' + ajaxKey)

  }

  addRequestKey(ajaxKey)

  //bluebird包装成promisepromise api

  return new Promise( (resolve, reject) {

  //经过wx.request api 向服务器端宣布http恳求

  wx.request({

  url: data.url,

  data: data.data,

  method: data.method,

  header: data.header || {'Content-Type': 'application/json'},

  complete: (res) {

  // 恳求完结,开释记载的key,能够建议下次恳求了

  removeRequestKey(ajaxKey)

  let statusCode=res.statusCode

  if (statusCode===200 || statusCode===304) {

  return resolve(res.data)

  }

  return reject(res)

  }

  })

  })

  }

  //通用get恳求办法

  export httpGet (data) {

  return http(data)

  }

  //通用post恳求办法

  export httpPost (data) {

  data.method='POST'

  return http(data)

  }

  // 该办法适用于串行恳求的api

  export lockRequest (data, fn) {

  let ajaxKey=getLockRequestKey(data)

  if (hitRequestKey(ajaxKey)) {

  throw Error('重复提交恳求:' + ajaxKey)

  }

  addRequestKey(ajaxKey)

  return new Promise( (resolve, reject) {

  fn(data)

  .then( (data) {

  removeRequestKey(ajaxKey)

  return resolve(data)

  })

  .catch( (error) {

  removeRequestKey(ajaxKey)

  return reject(error)

  })

  })

  }

  全体思路就是一致一切恳求的进口,然后以小程序API恳求的地址,参数,恳求类型(get,post)等组装为唯一key缓存起来。这样就能知道某个恳求的完结状态,当第二个相同的恳求过来时,咱们能够依据上一次的状态来判别下一步的操作。

  微信小程序怎么防止屡次点击我们都学会了啊?