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

比如说,下拉加载更多的这个功能和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 节流的更多相关文章

  1. js节流函数和js防止重复提交的N种方法

    应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...

  2. js节流防抖应用场景,以及在vue中节流防抖的具体实现

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...

  3. JS节流与防抖

    节流 节流,走字面上理解就是节约流量.比作水就话就是让水流的少一点,节约一点.对应到JS当中,就是在scroll事件和mousemove事件的时候,浏览器会很频繁的被触发,会导致对应的事件也会被很频繁 ...

  4. JS节流和防抖

    事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...

  5. js节流函数高级版

    节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> < ...

  6. JS节流和防抖函数

    一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) {  // 利用闭包保存时间  let prev = Date.now()  re ...

  7. js节流与防抖函数封装

    js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...

  8. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

  9. js 节流函数 throttle

    /* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...

随机推荐

  1. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  2. 在自己的框架中引用 PHPExcel

    如果直接在框架中的controller中直接引用 xxxx/PHPExcel.php,由于框架中有autoload 与PHPExcel的autoload冲突(加载目录原因), 那么在不想做太多修改的情 ...

  3. VMware下OS X Yosemite安装VMsvga2桌面黑屏解决方法

    VMsvga2目前并不支持Yosemite,如果安装的话进入桌面除了顶部菜单,全部黑屏.通过顶部菜单打开的大部分应用都会立刻奔溃关闭.参考以下步骤可以解决问题: 1.下载VMsvga2的uninsta ...

  4. C# 退出程序方法

    1.this.Close();   只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application.Exit();  强制所有消息中 ...

  5. js中的执行上下文,菜鸟入门基础。

    console.log(a); //Uncaught ReferenceError: a is not defined 因为没有定义a所以报错了. var a = 52; console.log(a) ...

  6. hdu 2014鞍山赛区 5073 Galaxy

    题意:就是给你 n 个数,代表n个星球的位置,每一个星球的重量都为 1 ! 开始的时候每一个星球都绕着质心转动,那么质心的位置就是所有的星球的位置之和 / 星球的个数 现在让你移动 k 个星球到任意位 ...

  7. specify a file path to store the seed

    此问题是由于你的php没有开启open-ssl模块功能引起的. 所以解决方案为开启php的open_ssl模块功能. 开启open_ssl的方式很简单,打开php.ini文件,将行头的分号删除即可. ...

  8. 【转载】如何使用 gnome-screenshot 截图命令

    转载自:http://www.linuxeden.com/html/softuse/20130726/141753.html 日常工作中,我们经常需要截取屏幕状态来给其他人看.一般情况下,我们能最直接 ...

  9. 网站跨站点单点登录实现--cookie

    至于什么是单点登录,举个例子,如果你登录了msn messenger,访问hotmail邮件就不用在此登录.一般单点登录都需要有一个独立的登录站点,一般具有独立的域名,专门的进行注册,登录,注销等操作 ...

  10. SQL Server里的INTERSECT

    在今天的文章里,我想讨论下SQL Server里的INTERSECT设置操作.INTERSECT设置操作彼此交叉2个记录集,返回2个集里列值一样的记录.下图演示了这个概念. INTERSECT与INN ...