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

代码实现（html）：

<!doctype html>
<html>

<head>

</head>

<body>
    <button id="clickme" value="">点我，我不理你</button>
</body>
<script src="test.js"></script>

</html>

代码实现（Js）：

function ST(num , fun){
    if(!ST.prototype.isopen){
        ST.prototype.isopen = "ok";
        setInterval(function(){
            return ST.prototype.isopen = "ok";
        },num);
        return fun;
    }
    if(ST.prototype.isopen == "ok"){
        ST.prototype.isopen = "no";
        return fun;
    }
}
document.getElementById("clickme").addEventListener('click',function(){
    var myFun = ST(6000,function(){
       return console.log("this :" +Math.random(10));
    })
    if(typeof  myFun ===  "function")
    myFun();
});

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

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

var movers          = document.querySelectorAll('.mover'),
    lastScrollY     = 0,
    ticking         = false;

/**
 * Set everthing up and position all the DOM elements
 * - normally done with the CSS but, hey, there's heaps
 * of them so we're doing it here!
 */
(function init() {

    for(var m = 0; m < movers.length; m++) {
        movers[m].style.top = (m * 10) + 'px';
    }

})();

/**
 * Callback for our scroll event - just
 * keeps track of the last scroll value
 */
function onScroll() {
    lastScrollY = window.scrollY;
    requestTick();
}

/**
 * Calls rAF if it's not already
 * been done already
 */
function requestTick() {
    if(!ticking) {
        requestAnimationFrame(update);
        ticking = true;
    }
}

/**
 * Our animation callback
 */
function update() {
    var mover               = null,
        moverTop            = [],
        halfWindowHeight    = window.innerHeight * 0.5,
        offset              = 0;

    // first loop is going to do all
    // the reflows (since we use offsetTop)
    for(var m = 0; m < movers.length; m++) {

        mover       = movers[m];
        moverTop[m] = mover.offsetTop;
    }

    // second loop is going to go through
    // the movers and add the left class
    // to the elements' classlist
    for(var m = 0; m < movers.length; m++) {

        mover       = movers[m];

        if(lastScrollY > moverTop[m] - halfWindowHeight) {
            mover.classList.add('left');
        } else {
            mover.classList.remove('left');
        }

    }

    // allow further rAFs to be called
    ticking = false;
}

// only listen for scroll events
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. 配置phonegap Android开发环境

    phonegap的安装路途曲折,首先要基于多种程序,中途还要解决各种问题,下面是phonegap需要的程序 1.NodeJs 2.Phonegap 3.jdk,jre 4.Apache Ant 5.A ...

  2. windows tcp端口映射或端口转发

    windows tcp端口映射或端口转发 windows内部有一个叫netsh的玩意,可以把tcp端口进行映射或转发,可惜不支持udp.举个例子:一台windows有一个80端口,对外可以访问.另有一 ...

  3. leetcode第16题--3Sum Closest

    Problem:Given an array S of n integers, find three integers in S such that the sum is closest to a g ...

  4. apache kafkac系列lient发展-java

    apache kafka区QQ群:162272557 1.依赖包 <dependency>             <groupId>org.apache.kafka</ ...

  5. 使用fixed制作浮动广告（注意：解决闪屏问题，但适用于高版本浏览器，低版本的浏览器不适用）

    <script language="javascript" type="text/javascript"> //隐藏广告 function clos ...

  6. Mysql 嵌套游标添以及任意位置声明变量的方法

    在写存储过程的时候,会遇到某个游标的筛选条件来自于 先前语句运行的结果,比较常见的方式是 再写一个存储过程,通过调用来完成 动态参数的配置, 或者使用 动态sql的功能,而这两种方式都不能很好的解决这 ...

  7. Strategic Game HDU

    Strategic Game                                                         Time Limit: 20000/10000 MS (J ...

  8. 【值得收藏】Mathematica数值计算工具的学习资料汇编【可免费下载】

    Mathematica学习教程 Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.Mathematica与Matlab ...

  9. “String.h” 源代码总结

    <String.h>  总结: 常用的函数:   一.memchr: 说明:当第一次遇到字符ch时停止查找.如果成功,返回指向字符ch的指针:否则返回NULL. 代码: #include ...

  10. FineUI开源版之TreeGrid实现

    FineUI开源版是没有树表格的,但是又需要,怎么办呢?在博客园看到一位大大的文章 http://www.cnblogs.com/shiworkyue/p/4211002.html 然后参考,不知道为 ...