zoukankan      html  css  js  c++  java
  • js函数节流

    在js里,对dom的操作是一种很昂贵的操作。如果连续尝试过多的dom操作可能会导致浏览器的卡死甚至崩溃,而这些操作在实际开发中又很常见:

      比如,我们定义一个onresize事件,那么只要调整浏览器的大小,就会触发该事件,如果我们在该事件处理程序内部再进行dom操作,这将造成高额的资源消耗

      又比如,我们点击一个按钮就发送一条ajax请求,如果网络不好,导致请求或回应延迟,用户可能会连续点击按钮,假如前端和后端都不做处理,就可能造成数据重复保存(一般不会出现,后端通常也会做处理)

    为了解决这种可能的连续操作,我们有了一个函数节流的概念--Throttle

    Throttle的基本思想是:

      在第一次调用函数时创建一个定时器,在指定的时间间隔后执行代码;如果在时间间隔内再次调用throttle函数,会清空原来的定时器,重置一个定时器;

    原理其实很简单,直接看代码:

        var btn = document.getElementById("btn");
    
        function throttle (method ,context) {
            clearTimeout(method.tID);
            method.tID = setTimeout (function () {
                method.call(context);
            }, 1000);
        }
    
        function say () {
            console.log("按钮被点击了");
        }
    
        btn.addEventListener('click',function() {
            throttle(say);
        });

    在上述代码中,throttle创建了一个定时器,在1秒后调用say方法,如果点了按钮后,不到1秒后又点击了按钮,那么throttle会清空原来的定时器,重新创建一个定时器,1秒后调用say方法,从而保证了1秒内无法重复调用say方法

  • 相关阅读:
    linux创建用户和组
    ftp上来显示的时间和系统时间不一致
    在Linux下如何用Shell脚本读写XML?现有一个config.xml(转)
    关于业务主键和逻辑主键
    git push 提示
    浏览器默认样式
    css实现缩进无限嵌套
    使用设置报头x-Frame-Options限制iframe网页嵌套
    chrome控制台小技巧
    git版本库底层命令
  • 原文地址:https://www.cnblogs.com/just4play/p/5717528.html
Copyright © 2011-2022 走看看