最近一个面试官问了我一个函数节流的问题，然后感觉自己工作中遇到过这个问题，但是不知道这种形式就是函数节流。下面我来说下这个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. leetcode第八题--String to Integer (atoi)

    Problem: Implement atoi to convert a string to an integer. Hint: Carefully consider all possible inp ...

  2. Mac OSX系统安装和配置Zend Server 6教程（2）

    继上一节安装好Zend Server 6以后,我们需要修改配置文件.首先修改服务器监听端口.默认的情况下Zend Server 6安装以后的端口是10088.一般开发者使用的都是HTTP默认端口80. ...

  3. PLSQL-Developer数据库连接工具使用方法

    PLSQL-Developer数据库连接工具使用方法 该方法适用于本机未安装Oracle客户端的情况下如何让连接到数据库.经过本人亲自测试绝对可以连接.前提是您安装的版本没有问题,如您安装的版本有问题 ...

  4. leetcode[94] Unique Binary Search Trees

    给定n,那么从1,2,3...n总共可以构成多少种二叉查找数呢.例如给定3 Given n = 3, there are a total of 5 unique BST's. 1 3 3 2 1 \ ...

  5. 《互联网初创企业password》书评

    今天试用了一下<互联网初创企业password>这本书.我觉得这本书开始的很真实,从学校刚毕业那会儿.它是生命,他们的牛b时间,一直想做点什么来证明自己.具体地,并且现在是在最好的时候.互 ...

  6. .NET大型B2C开源项目nopcommerce解析——项目结构

    .NET大型B2C开源项目nopcommerce解析——项目结构 编写本文档是为了向程序员说明nopcommerce的解决方案结构,亦是程序员开发nopcommerce的居家必备良书.首先nopcom ...

  7. 【转】仿QQ5.0侧滑菜单ResideMenu

    本文由孙国威 原创.如需转载,请注明出处! 原文:http://blog.csdn.net/manoel/article/details/39013095 为了后续对这个项目进行优化,比如透明度动画. ...

  8. mysql主从同步配置(windows环境)

    mysql主从同步配置(mysql5.5,windows环境)   A主机(作为主服务器)环境:windows8.mysql5.5 ip:192.168.1.100(自己填) B主机(作为从服务器,由 ...

  9. How To: Use CLR Profiler

    (翻译)How To: Use CLR Profiler   第一次翻译对我而言比较长的E文,有很多不足之处,请见谅.(个人的习惯GC又做了名词又做了名词) 原文:http://msdn.micros ...

  10. iOS基础 - XML & JSON

    一.HTML & XML HTML 是用来描述网页的一种语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记 ...