关于异步加载数据绑定同一个函数的问题

1、有一个需求:在一个页面中,信息都是从服务器异步加载到web前端的,信息渲染到前端是一个列表,每个列都有一个倒计时

2、难题:怎么给每个列绑定同一个函数呢

3、解决方法:在循环拼接列表的时候,给每个列一个唯一的id,在循环中调用时,把唯一的id传进去,这样就可以给每个列绑定同一个函数,并执行不同的倒计时时间戳

代码:

$.ajax({

  url: url,

  success: function(result){

  $("#collage_number").html(result.msg.collage_number)

  var html="",arr=result.msg.collage_result;//arr是请求到的数组信息

  for(var i =0;i<arr.length;i++){

  moreHtml+="<li class='clear'><img class='lt avartar' src='/assets/images/statics/person.png'><div class='lt'>     <span>"+arr[i].customer_fullname+"</span><p class='pindanDownTime' data-start='"+arr[i].begin_time+"' data-   end='"+arr[i].end_time+"'>Remaining time <span class='pindanHour"+arr[i].id+"'>23</span>:<span   class='pindanMin"+arr[i].id+"'>59</span>:<span class='pindanSec"+arr[i].id+"'>00<span></p><p>Still need <span   class='pindan_num'>"+arr[i].need_people+"</span> People to join in</p></div><a class='rt join_btn' data-     num='"+arr[i].need_people+"' data-id='"+arr[i].id+"' data-start='"+arr[i].begin_time+"' data-end='"+arr[i].end_time+"' data-       hour='pindanHour"+arr[i].id+"' data-min='pindanMin"+arr[i].id+"' data-sec='pindanSec"+arr[i].id+"'>Join To Buy</a></li>";

  time_down(arr[i].id,arr[i].begin_time,arr[i].end_time,'pindanHour'+arr[i].id,'pindanMin'+arr[i].id,'pindanSec'+arr[i].id,)//调用倒计时函数

}

$("#List").html(html)

}

倒计时函数代码:

function time_down(id,start,end,Hour,Min,Sec){

  var nowTime=(new Date().getTime()/1000).toFixed();

  var intDiff = end-nowTime;//倒计时总秒数量

  function timer(intDiff){

    var interval = setInterval(function(){

    var day=0,hour=0,minute=0,second=0;

    if(intDiff > 0){

      day = Math.floor(intDiff / (60 * 60 * 24));

      hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

      minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

      second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

    }else {

      clearInterval(interval);

      interval = null;

    getTime();

    }

    if (minute <= 9) minute = '0' + minute;

    if (second <= 9) second = '0' + second;

    $('.'+Hour).html(hour);

    $('.'+Min).html(minute);

    $('.'+Sec).html(second);//'pindanHour'+arr[i].id,'pindanMin'+arr[i].id,'pindanSec'根据传入的参数,id不一样,class不一样,就可以绑定动态的class跟内容(倒计时时间不一样)

    intDiff--;

  }, 1000);

}

timer(intDiff);

}

}

},

dataType:"json"

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值