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

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"

});

猜你喜欢

转载自blog.csdn.net/qq_40101922/article/details/82142401