zoukankan      html  css  js  c++  java
  • 节流和防抖

      在前端开发中会有用户行为会频繁的触发事件,比如疯狂的点击。对于dom操作,资源的加载等耗费性能的处理可能会导致界面的卡顿,甚至浏览器崩溃。函数节流防抖就是为了解决类似的问题产生的。

      函数节流就是预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就像水滴到攒到一定重量才会滴落。

      html部分有一个点击按钮,当点击的时候会显示点击的次数。

    <div id="div">0</div>
    <button id="btn"></button>

      script部分在点击时候限制在1秒钟只能点击一次

         var div = document.getElementById("div");
         var btn = document.getElementById("btn");

        function throttle(handle,wait){
                var lastTime = 0;
                return function(e){
                    var nowTime = new Date().getTime();  //从1900开始到现在过了多少毫秒
                    if(nowTime - lastTime > wait){
                        handle.apply(this,arguments)
                        lastTime = nowTime;
                    }
                }
            }
            function buy(e){
                console.log(this,e)
                div.innerHTML = parseInt(div.innerHTML) + 1;
            }
            btn.onclick = throttle(buy,1000)

      防抖:类似于上公交车,有人上的时候车不会走。当没有人上的时候,等一段时间再走。再互联网的应用比如说百度搜索,当输入字符的时候不会马上搜索,而是当停止输入过一段时间后自动搜索。

      html 部分是一个输入框

    <input type="text" id="inp">

     script部分是防抖代码,一秒钟以后才会搜索

            var inp = document.getElementById("inp");
            var timer = null;
            function ajax(){
                console.log(this.value);
            }
            inp.oninput = function(){
                var self = this;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    ajax.call(self)
                },1000)
            }
  • 相关阅读:
    PHP如何判断一个gif图片是否为动画?
    Linux常用系统管理命令(top、free、kill、df)
    Mysql字符串连接函数 CONCAT()与 CONCAT_WS()
    OSChina.net 的 Tomcat 配置 server.xml 参考
    修改Linux默认启动级别或模式
    更改CentOS 6.3 yum源为国内 阿里云源
    PHP session过期机制和配置
    PHP垃圾回收机制防止内存溢出
    memcache与memcached的区别
    【总结】虚拟机VirtualBox各种使用技巧
  • 原文地址:https://www.cnblogs.com/wangzheng98/p/11344659.html
Copyright © 2011-2022 走看看