JS 节流

时间:2022-04-10 15:26:41

作为前端的小白,在做项目的过程中,一般只考虑到实现功能,并没有考虑到性能的问题。

比如说,下拉加载更多的这个功能和resize()是特别耗费性能的。此时就要想到节流了。

节流:就是然一个函数无法在短时间内连续的执行,只有上一函数执行后过了你所能规定的时间,才能继续执行以下的操作。

节流原理:原理其实很简单,用个定时器控制一下就好,但是,在用之前,注意,要清空定时器。自我认为,定时器这种东西跟浮动差不多,随时用随时清理。

例子:

function isBottom(){
  var timer = setInterval(function(){
    $(window).bind('scroll', function(){
    var loadType = $("#ifHeight").contents().find(".load-news").attr("load-type");
    if(loadType == "true"){
      return;
    }
    var scroll = $(window).scrollTop();
    if(scroll>= $(document).height()-$(window).height()-100){
      $("#ifHeight").contents().find(".load-news").attr("load-type","true");
      $("#ifHeight").contents().find(".load-news").show();
      var news = $("#ifHeight").contents().find("input[name=news]:checked").val();
      var curIndex = $("#ifHeight").contents().find("#curIndex").val();
      document.getElementById("ifHeight").contentWindow.creatLi(parseInt(curIndex),10,news,false);
      var doc = $(window.top.document);
      var h=$("#ifHeight").contents().height();
      var ifHeight = doc.find("#ifHeight").css({
      height:h
     });
  }
})
},50)
}

代码的功能仅仅是为了父页面获取子页面的高度,然后更改父页面的高度。

主要想体现出,节流的功能。