最近一个面试官问了我一个函数节流的问题，然后感觉自己工作中遇到过这个问题，但是不知道这种形式就是函数节流。下面我来说下这个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. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  2. Java 之JavaBean 、EJB 和POJO

    由于是创业公司,开发人员较少,所以公司临时决定让几个C的程序猿临时客串Java.所以避免不了有很多基础问题,今天就有两个人都问我,JavaBean和POJO的区别,我可按照自己的理解给他们大致说了下, ...

  3. 安装Oracle 9i - 初学者系列 - 学习者系列文章

    Oracle 9i数据库是经典的Oracle版本,就象SQL Server 2000一样.笔者最初使用到的Oracle版本就是Oracle 9i.下面就介绍下Oracle 9i的安装. 1.  下载O ...

  4. 整理 W3CSchool 常用的CSS属性列表

    近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...

  5. WITH (NOLOCK)浅析

    SQL Server 中WITH (NOLOCK)浅析 2014-08-30 11:58 by 潇湘隐者, 503 阅读, 2 评论, 收藏, 编辑 概念介绍 开发人员喜欢在SQL脚本中使用WITH( ...

  6. MySQL5.7 安装过程中出现 attempting to start service 过不去

    MySQL5.7 安装过程中出现 attempting to start service 过不去. 1,机制打开服务,把MySql服务名启动(我的是MySqlAliyun) 启动失败:提示1067错误 ...

  7. MVC5搜索/查询 流程功能的实现

    接着上次的篇幅,我们这篇手动来写一个查询的流程代码!  搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第一步应该做什么呢!第一次是不是我们应该去Controller(控制器)里去搞一个搜索 ...

  8. 应用CSS的page-break-after属性 实现WEB页面强制分页打印

    虽然dedecms.com向大家介绍了很多CSS属性的相关知识,但有些非常冷门的属性还是有所欠缺.在B/S程序中,对打印页面的控制,CSS相对比较弱,例如: 自动分页, 就基本没啥实际用途.我们通常需 ...

  9. Random随机数

    Random类的常用方法 方法 备注 Int nextInt() 返回一个int类型的随机数 Int nextInt(n) 返回一个0到n之间的数,不包括n Double nextDouble() 返 ...

  10. CentOS 6.4源码编译安装httpd并启动测试

    今天来总结一下在Linux中软件安装,通常我们应该知道,安装软件有两种方法:一种是软件包的安装,也就是rpm包的安装,就是指这些软件包都是 已经编译好的二进制rpm包,我们通过rpm安装工具和yum安 ...