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

    一、开始

    很多时候一些事件我们希望他一段时间内只被触发一次,比如轮播图之类的,多次点击就会被处理为一次。

    这个问题被称作“防抖(节流)”问题,可以通过设置定时器来解决

    二、模拟

    我们模拟一个会被多次触发的事件,这里选用mousemove,每移动一次鼠标就会触发:

    var wra = document.getElementById('wrapper');
        var inn = 0;
        wra.innerText = inn;
        wra.onmousemove = over;
    
        function over(e){
            wra.innerText = ++inn;
        }

    我们通过改变wrapper内的数字来看这个事件的触发情况:

    可以看到从左到右移动鼠标触发了这个时间78次。

    现在我们通过改变代码实现在一秒内只触发一次:

    var wra = document.getElementById('wrapper');
        var inn = 0;
        wra.innerText = inn;
        wra.onmousemove = over();
    
        function over(e){
            var timer;
            return function(){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    deal();
                },1000)
            }
        }
    
        function deal(){
            wra.innerText = ++inn;
        }

    现在变成了鼠标移动停止后一秒再执行处理函数。

    正常情况下我们不可能直接拿到要操作的dom元素,需要再执行函数拿到,如果我们直接再deal里面打印this,得到的会是window,而不是我们要的dom,

    所以我们要把触发事件的dom元素保存起来,传给deal

    var wra = document.getElementById('wrapper');
        var inn = 0;
        wra.innerText = inn;
        wra.onmousemove = over();
    
        function over(e){
            var timer;
            return function(){
                var _this = this;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    deal.apply(_this);
                },1000)
            }
        }
    
        function deal(){
            this.style.background = 'white';
            this.style.color = 'black';
            this.innerText = ++inn;
        }

    我们把触发事件的this传给deal,并改变了this的背景和文字颜色,当然也可以传参,加在apply()

  • 相关阅读:
    利用idea里面的mysql插件进行导入sql文件
    JSTL标签
    deepin20系统下配置JAVA开发环境
    deepin20安装及问题解决
    SpringBoot 在项目启之后执行自定义方法的两种方式
    Nick 的经验书
    Java 经验书
    SpringBoot 经验书
    Linux 经验书
    在MacOS中启动SSH服务
  • 原文地址:https://www.cnblogs.com/lastnigtic/p/6963758.html
Copyright © 2011-2022 走看看