最近一个面试官问了我一个函数节流的问题，然后感觉自己工作中遇到过这个问题，但是不知道这种形式就是函数节流。下面我来说下这个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. jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  2. 在weblogic11g发布该项目时遇到错误（不支持web-app_3_0）

    problem: cvc-enumeration-valid: string value '3.0' is not a valid enumeration value for web-app-vers ...

  3. linux sendmail 邮件服务器架设(fedora 8)

    linux sendmail 邮件服务器架设(fedora 8) 2009-01-22 17:27 3316人阅读 评论(2) 收藏 举报 邮件服务器linuxprotocolscaching测试lo ...

  4. ASP.NET MVC IOC之Unity攻略

    ASP.NET MVC IOC之Unity攻略 一.你知道IOC与DI吗? 1.IOC(Inversion of Control )——控制反转 即依赖对象不在被依赖模块的类中直接通过new来获取 先 ...

  5. Android：开发环境搭建、移植

    一:搭建Android安卓开发环境 准备文件 1.eclipse-SDK-4.2-win32.zip 2.JDK(Java Development Kit) 3.ADT,安卓开发的一个eclipse的 ...

  6. C#事件与委托的区别

    C#事件与委托的区别 1. 委托 事件是利用委托来定义的,因此先解释委托.委托是一个类,它与其他类如int,string等没有本质区别,int代表的是所有的整形,而string代表的是字符串,委托则代 ...

  7. ThoughtWorks开发持续集成及部署利器:Go

    持续集成及部署利器:Go   Go是一款先进的持续集成和发布管理系统,由ThoughtWorks开发.(不要和Google的编程语言Go混淆了!)其前身为Cruise,是ThoughtWorks在做咨 ...

  8. discuz X3.1的门户文章实现伪静态，利于搜索引擎收录url的地址修改

    最近在捣鼓DZ框架,这两天发现文章的收录情况并不是太理想,做了很多优化方面的工作,今天主要解决了DZ门户的文章链接伪静态化,在这次修改之前,也做过一次在网上找的静态化修改,之前做的方式是: 1.在DZ ...

  9. Python 用POP接收邮件

    一.简介 POP(Post Office Protocal)最长用的POP版本是POP3,因此本文是以POP3为主.POP3非常简单,可以用来从邮件服务器上下载邮件,然后删除这些邮件.功能非常有限,后 ...

  10. 读写ini文件

    C# 使用文件流来读写ini文件 背景 之前采用ini文件作为程序的配置文件,觉得这种结构简单明了,配置起来也挺方便.然后操作方式是通过WindowsAPI,然后再网上找到一个基于WindowsAPI ...