最近一个面试官问了我一个函数节流的问题，然后感觉自己工作中遇到过这个问题，但是不知道这种形式就是函数节流。下面我来说下这个Js的高级问题，思路：函数节流就是防止用户高频调用某个事件而做的Js层面的处理方法。主要就是在一定时间内让用户的操作只执行一次指定方法。

代码实现（html）：

  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. </head>
  7.  
  8. <body>
  9.     <button id="clickme" value="">点我，我不理你</button>
  10. </body>
  11. <script src="test.js"></script>
  12.  
  13. </html>

代码实现（Js）：

  1. function ST(num , fun){
  2.     if(!ST.prototype.isopen){
  3.         ST.prototype.isopen = "ok";
  4.         setInterval(function(){
  5.             return ST.prototype.isopen = "ok";
  6.         },num);
  7.         return fun;
  8.     }
  9.     if(ST.prototype.isopen == "ok"){
  10.         ST.prototype.isopen = "no";
  11.         return fun;
  12.     }
  13. }
  14. document.getElementById("clickme").addEventListener('click',function(){
  15.     var myFun = ST(6000,function(){
  16.        return console.log("this :" +Math.random(10));
  17.     })
  18.     if(typeof  myFun ===  "function")
  19.     myFun();
  20. });

当然啦，这个只是本人在没有参照的情况下自己的实现，其实社区中早就有人提出了这个最佳实践（可能需要FQ）

下面这个就是社区中的最佳实践：

  1. var movers          = document.querySelectorAll('.mover'),
  2.     lastScrollY     = 0,
  3.     ticking         = false;
  4.  
  5. /**
  6.  * Set everthing up and position all the DOM elements
  7.  * - normally done with the CSS but, hey, there's heaps
  8.  * of them so we're doing it here!
  9.  */
  10. (function init() {
  11.  
  12.     for(var m = 0; m < movers.length; m++) {
  13.         movers[m].style.top = (m * 10) + 'px';
  14.     }
  15.  
  16. })();
  17.  
  18. /**
  19.  * Callback for our scroll event - just
  20.  * keeps track of the last scroll value
  21.  */
  22. function onScroll() {
  23.     lastScrollY = window.scrollY;
  24.     requestTick();
  25. }
  26.  
  27. /**
  28.  * Calls rAF if it's not already
  29.  * been done already
  30.  */
  31. function requestTick() {
  32.     if(!ticking) {
  33.         requestAnimationFrame(update);
  34.         ticking = true;
  35.     }
  36. }
  37.  
  38. /**
  39.  * Our animation callback
  40.  */
  41. function update() {
  42.     var mover               = null,
  43.         moverTop            = [],
  44.         halfWindowHeight    = window.innerHeight * 0.5,
  45.         offset              = 0;
  46.  
  47.     // first loop is going to do all
  48.     // the reflows (since we use offsetTop)
  49.     for(var m = 0; m < movers.length; m++) {
  50.  
  51.         mover       = movers[m];
  52.         moverTop[m] = mover.offsetTop;
  53.     }
  54.  
  55.     // second loop is going to go through
  56.     // the movers and add the left class
  57.     // to the elements' classlist
  58.     for(var m = 0; m < movers.length; m++) {
  59.  
  60.         mover       = movers[m];
  61.  
  62.         if(lastScrollY > moverTop[m] - halfWindowHeight) {
  63.             mover.classList.add('left');
  64.         } else {
  65.             mover.classList.remove('left');
  66.         }
  67.  
  68.     }
  69.  
  70.     // allow further rAFs to be called
  71.     ticking = false;
  72. }
  73.  
  74. // only listen for scroll events
  75. window.addEventListener('scroll', onScroll, false);

实现原理都是一样的，欢迎大家流言。

结构-行为-样式-Js函数节流的更多相关文章

  1. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

  2. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  3. Underscore.js 函数节流简单测试

    函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js  本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...

  4. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  5. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  6. JS函数节流和防抖

    看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...

  7. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  8. JS函数节流

    背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...

  9. JS 函数节流与防抖

    前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...

随机推荐

  1. POJ2533 Longest Ordered Subsequence 【最长递增子序列】

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 32192   Acc ...

  2. Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候 ...

  3. iOS：由URL成员UIImage

    很多时候,我们只能得到URL.然后,需要建立一个UIImage. 在正常情况下,.我们一般通过SDWebImage直接施工UIImageVIew的image,如何使用URL直接施工UIImage它? ...

  4. Metadata是.NET平台的核心灵魂--(转载)

    (转载)Metadata是.NET平台的核心灵魂 July 7th, 2010 jzli Leave a comment Go to comments 网友来信:李老师,您好!我参加过你去年到我们公司 ...

  5. Mac OS X下环境搭建 Sublime Text 2 环境变量配置 开发工具配置Golang (Go语言)

    Golang (Go语言) Mac OS X下环境搭建 环境变量配置 开发工具配置 Sublime Text 2 一.安装Golang的SDK 在官网http://golang.org/ 直接下载安装 ...

  6. 如何在ubuntu 12.04下搭建Python Django环境

    1. 检查python是否安装:直接在shell里输入python,如果已经安装了python,即可进入python bash,并看到版本号(如Python 2.7.3) ——在ubuntu中pyth ...

  7. 13个不可不知的ASP.NET MVC扩展点

    13个不可不知的ASP.NET MVC扩展点 ASP.NET MVC设计的主要原则之一是可扩展性.处理管线(processing pipeline)上的所有(或大多数)东西都是可替换的.因此,如果您不 ...

  8. linux下监控进程需掌握的四个命令

    linux下监控进程需掌握的四个命令   在LInux系统下,最困难的工作之一就是跟踪正在系统中运行的程序,尤其是现在,图形桌面使用很多的程序,只是为了生成一个桌面环境,系统中运行了太多的进程,幸运的 ...

  9. Shards

    跟我一起云计算(5)——Shards   什么是sharding Sharding的基本思想就要把一个数据库切分成多个部分放到不同的数据库 (server)上,从而缓解单一数据库的性能问题.不太严格的 ...

  10. iframe跨域通讯

    工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...