JS 节流

2024-08-24 02:11:11

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

比如说，下拉加载更多的这个功能和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)
}

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

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

最新文章

热门文章