JS 节流
作为前端的小白,在做项目的过程中,一般只考虑到实现功能,并没有考虑到性能的问题。
比如说,下拉加载更多的这个功能和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)
}
代码的功能仅仅是为了父页面获取子页面的高度,然后更改父页面的高度。
主要想体现出,节流的功能。
JS 节流的更多相关文章
- js节流函数和js防止重复提交的N种方法
应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...
- js节流防抖应用场景,以及在vue中节流防抖的具体实现
故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...
- JS节流与防抖
节流 节流,走字面上理解就是节约流量.比作水就话就是让水流的少一点,节约一点.对应到JS当中,就是在scroll事件和mousemove事件的时候,浏览器会很频繁的被触发,会导致对应的事件也会被很频繁 ...
- JS节流和防抖
事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...
- js节流函数高级版
节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> < ...
- JS节流和防抖函数
一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() re ...
- js节流与防抖函数封装
js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- js 节流函数 throttle
/* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...
随机推荐
- HDU 1175 连连看
连连看 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- QT编写DLL给外部程序调用,提供VC/C#/C调用示例(含事件)
最近这阵子,接了个私活,封装一个开发包俗称的SDK给客户调用,查阅了很多人家的SDK,绝大部分用VC编写,而且VC6.0居多,估计也是为了兼容大量的XP用户及IE浏览器,XP自带了VC6.0运行库,所 ...
- Unix sed实用教程开篇
已经看了一段时间的Linux Shell编程了,也能完成一些基本的使用,为了加深理解,恰好看到了The Unix School的一个sed&awk教程,不是简单的命令参数堆积,而是一个相当实用 ...
- 未能找到类型或命名空间名称“Coco”(是否缺少 using 指令或程序集引用)
未能找到类型或命名空间名称"Coco"(是否缺少 using 指令或程序集引用),如果你确实引用了,那说明你引用的和你的项目环境版本不一样,.NET framework的问题,修改 ...
- dSYM atos crash log 定位到代码行的方法(转)
做iOS开发的时候,常常会遇到crash,需要分析call stack的时候.有时候App在别人的设备崩溃,把crash report在自己的机器上打开,Xcode没有自动的进行符号化.这时候就需要自 ...
- 【原创】C#搭建足球赛事资料库与预测平台(4) 比赛信息数据表设计
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 本篇文章开始将逐步介 ...
- Unity3D 游戏开发之内存优化
项目的性能优化主要围绕CPU.GPU和内存三大方面进行. 无论是游戏还是VR应用,内存管理都是其研发阶段的重中之重. 然而,在我们测评过的大量项目中,90%以上的项目都存在不同程度的内存使用问题.就目 ...
- Unity 3D Intantiate过程中Transform 空物体和本体之间的关系
想当年刚学Unity的时候,这个问题困扰了我好几天,因此来分享一下当初解决问题的思路. 我们通过Unity构建场景的过程中,经常发现一个现象,就是物体在拖进场景中后,我们会发现物体是反的,通过改变物体 ...
- 手把手教你从购买vps到搭建一个node服务器
要准备什么? 1.5刀 2.最好有FQ软件(可以用蓝灯) let's Go! 一.vps购买 vps可以选择digital ocean(do) 链接 ,由于是外国网站,响应比较慢,所以最好翻个墙. g ...
- Android学习笔记之BitmapFactory.Options实现图片资源的加载...
PS:小项目总算是做完了...历经20多天...素材,设计,以及实现全由自己完成...心力憔悴啊...该写写博客记录一下学习到的东西了... 学习内容: 1.使用BitmapFactory.Optio ...