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

比如说,下拉加载更多的这个功能和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. 华为 HG8245C 光猫 修改无线用户数限制+hw_ctree.xml 文件解密

    这个操作方法是 从网上其他人提供的方法  和我一个朋友总结出来的,我只是负责整理,并实地在我自己的光猫上操作成功了 风险提示 :刷机有风险,操作需谨慎, 备份备份备份! 俺家,俺的新家是电信光纤接入, ...

  2. ios ZBar扫二维码奇奇怪怪的错误

    Undefined symbols for architecture armv7: "_CVPixelBufferGetHeight", referenced from: -[ZB ...

  3. GET到新技能,SharpCEF,C#和JS的互相调用

    winform程序内嵌谷歌浏览器,使用大名鼎鼎的“SharpCEF”.这里科普一下: CEF是什么 CEF是Chromium Embedded Framework的缩写,是个基于Google Chro ...

  4. 【转载】linux内核启动android文件系统过程分析

    主要介绍linux 内核启动过程以及挂载android 根文件系统的过程,以及介绍android 源代码中文件系统部分的浅析. 主要源代码目录介绍Makefile (全局的Makefile)bioni ...

  5. oracle 查询当前库中所有表以及某表字段信息

    select utc.COLUMN_ID,utc.TABLE_NAME,utc.COLUMN_NAME,utc.DATA_TYPE||utc.DATA_LENGTH,utc.DATA_DEFAULT, ...

  6. 【转】NPOI 单元格级别应用

    NPOI 单元格级别应用A HSSFWorkbook hssfworkbook = new HSSFWorkbook();//初始化一个新的HSSFWorkbook实例 //#region 1.创建一 ...

  7. Java知多少(107)几个重要的java数据库访问类和接口

    编写访问数据库的Java程序还需要几个重要的类和接口. DriverManager类 DriverManager类处理驱动程序的加载和建立新数据库连接.DriverManager是java.sql包中 ...

  8. Linux下打开串口设置

    给出打开串口函数 int open_tty(char tty[]) { int fd; char tty_path[32]={0}; sprintf(tty_path,"/dev/%s&qu ...

  9. Outlook Web App简介

    一.什么是Outlook Web AppOutlook Web Access简称OWA是基于微软Hosted Exchange技术的托管邮局的一项Web访问功能.通过访问Outlook Web Acc ...

  10. IIS app pools, worker processes, app domains

    Copy from  http://stackoverflow.com/questions/14105345/iis-app-pools-worker-processes-app-domains I ...