防抖和节流正常情况下有时候我们会绑定一些如mousemove,scroll等的连续触发的事件防抖节流.......

OIP-C.jfif

正常情况下

有时候我们会绑定一些如mousemove,scroll等的连续触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = count;
</script>
   
</body>
</html>

有时候我们并不想让函数被连续地触发，可以采用防抖和节流地方式来进行控制

防抖

所谓的防抖就是在一个计时器的时间内函数只能执行一次，如果函数再次被触发的话，那么计时器就会清零重新计时。

function debounce(func,wait){
        let timeout
        return function(){
            let content = this;
            // 参数
            let arg = arguments;
            if(timeout)clearTimeout(timeout);
            timeout = setTimeout(()=>{
                func.apply(content,arguments)
            },wait)
        }
    }

    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = debounce(count,300);

节流

所谓的节流就是在计时器的时间范围内只能执行一次函数

function jieliu(func,wait){
        let timeout
        return function(){
            let content = this;
            let args = arguments;
            if(!timeout){
                timeout = setTimeout(()=>{
                    timeout = null;
                    func.apply(content,args)
                },wait)
            }
        }
    }

    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = jieliu(count,300)