Android防止抖动安卓防抖软件

转载

IT智行领袖 2023-11-03 18:36:41

文章标签 Android防止抖动 javascript .net 代码实现事件触发 文章分类 Android 移动开发

1、防抖

防抖，debounce。这个概念最早来自于相机，现在流行的相机防抖原理也分很多种，有镜头防抖、机身防抖等，我们代码里的防抖比较类似软件防抖：

“软件会持续地监测手的抖动情况：如果你的手正在抖动，这时候即便你已经摁下了快门手机也不会进行拍照，直到它监测到你忽然有一个瞬间手是比较静止的，诶！它就自动按下了快门！所以这个并不是什么主动的防抖功能，它只是主动选择了一个’手不抖的时间’拍照。这个功能适合拍风光，不适合拍人像，因为它没有办法抓拍。”[1]

Android防止抖动安卓防抖软件_javascript_02

再举个生活中的防抖例子，坐过电梯的童鞋应该感受过，电梯总是要等一小段时间后再关门，如果在电梯门关上之前，又有人进入，那么电梯就会重新开门等一小段时间再关上。如果不断有人在电梯关闭前进入，电梯就会等最后一个人进来后，再等待一小段时间后才真正关门运行。

所谓防抖，就是在事件触发后延迟n秒再执行；如果在这n秒内再次触发该事件，则重新计时，延迟n秒后再执行。

Android防止抖动安卓防抖软件_事件触发_03

代码实现：

function debounce(fn, delay) {
    let timer = null;
    return () = >{
        if (timer) {
            // 重新计时
            clearTimeout(timer);
        }
        const context = this;
        timer = setTimeout(() = >{
            fn.apply(context, arguments);
            clearTimeout(timer);
        },
        delay);
    }
}


let count = 0;
const play = debounce(() = >{
    console.log(count++);
},
3000);

在线运行：http://jsrun.net/Tr8Kp/edit

节流

节流，throttle。工程热力学术语释义：管道中流动的流体经过通道截面突然缩小的阀门、狭缝及孔口等部分后发生压力降低的现象称为节流。[2]

Android防止抖动安卓防抖软件_Android防止抖动_04

简单来讲，就是通过阀门限制实际流量。比如用户在10s内发起了1000次请求，节流控制后，实际上10s内，只有1次请求会被真正发送到服务器，其他请求都不会发出。

节流就是一段时间内，不论事件触发多少次，都只执行一次。

Android防止抖动安卓防抖软件_事件触发_05

代码实现：

// 时间戳版本
function throttle(fn, delay) {
    let isRun = false;
    let startTime = Date.now();
    return function() {
        let now = Date.now();
        if (now - startTime > delay) {
            // 延迟执行
            // const context = this
            // fn.apply(context, arguments)
            startTime = now isRun = false;
        }


        if (isRun) return;


        isRun = true;


        // 立即执行
        const context = this 
        fn.apply(context, arguments)
    }
}

let count = 0;
const play = throttle(() = >{
    console.log(count++);
},
3000);

在线运行：http://jsrun.net/Wr8Kp/edit

// 定时器版本
function throttle(fn, delay) {
    let timer = null
    return () = >{
        if (timer) return;
        const context = this;
        // 立即执行
        fn.apply(context, arguments);
        timer = setTimeout(() = >{
            // 延迟执行
            // fn.apply(context, arguments);
            clearTimeout(timer);
            timer = null;
        },
        delay);
    }
}


let count = 0;
const play = throttle(() = >{
    console.log(count++);
},
3000);

在线运行：http://jsrun.net/Lr8Kp/edit

防抖和节流的区别

看看下面这段测试代码：

let t = 0;
/** 每隔一秒点一下，一直都不会触发，除非停止自动点击 */
let interval = null;
start();
function start() {
    if (!interval) {
        interval = setInterval(() = >{
            t++;
            console.log("触发" + t + "次");
            play();
        },
        1000);
    }
}


function stop() {
    console.log("点击了停止触发");
    clearInterval(interval);
    interval = null;
}

这段测试代码，每隔1秒会触发一次play()方法，按照上面防抖和节流的代码，delay都是3s的话，输出结果各是什么？

防抖debounce输出结果：

Android防止抖动安卓防抖软件_javascript_06