zoukankan html css js c++ java

防抖动函数(debounce)的原理

debounce就是防抖动，在间隔不超过500ms的情况下，不管debounce执行多少次， lazyLoad都只执行一次；

function debounce() {
        clearTimeout(timer);
        timer = setTimeout(function() {
		 lazyLoad();
        }, 500);
    }
}

clearTimeout使得lazyLoad不会立即执行，每次debounce调用都会重置定时器，并再次等待，只有等debounce不再调用，并等待500ms之后lazyLoad才会被调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height:2000px">
<script>

    /*debounce就是防抖动， 在间隔不超过500ms的情况下，不管debounce执行多少次，srollFn都只执行一次；
    clearTimeout使得srollFn不会立即执行，每次debounce调用都会重置定时器，并再次等待，只有等
    debounce不再调用，并等待500ms之后srollFn 才会被调用。*/


    var num=0;
    function lazyLoad() {
        num++;
        console.log(num);
    }

    var timer = null;
    function debounce() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            lazyLoad();
        }, 1000);
    }
    window.onscroll= debounce;


</script>
</body>
</html>

查看全文

相关阅读:
文件操作2
操作文件1
标准库（一）：collections之orderedDict
类的模板导入
 类的继承
 类内成员和方法的使用
 redis高可用
 oracle数据库优化
 如何捕获oracle数据库异常
 oracle之语句触发器创建

原文地址：https://www.cnblogs.com/aredleave/p/7573161.html