JS中的节流和防抖

前言

在JS中,节流和防抖是两个相似的概念,都是为了限制JS频繁地运行一段代码。但两者还是有一定区别的。

节流

节流的目的是为了防止代码无间断执行,其思想是,在规定时间内改段代码只能执行一次,通过设置标记,根据标记值来表示这段时间内是否有代码执行,如果有,则不重复执行,等待下次触发。如果没有,则将标记置为True,设置定时器,当代码执行完毕后,再将标记位置为False. 代码如下:

 // 节流 : 防止某些代码没有间断的执行
    function throttle(method, context){
        if(method.isRun){
            return;
        }
        method.isRun = true;
        setTimeout(function(){
            method.call(context);
            method.isRun = false;
        }, 1000)
    }

防抖

是当某一事件连续被触发时,如鼠标移动事件,如果不做处理的话,它会不断执行对应的代码。在实际应用中可能是需要对鼠标移动做出响应,但不需要立刻做出反应,可以等鼠标停止一段时间后,执行逻辑代码。这个时候就需要对代码做防抖处理。其基本思想是,设置一个定时器,定时触发逻辑代码,当再次触发事件后,清除定时器,并设置一个新的,重新计时。代码如下:

//防抖:
    function debounce(method, context){
        clearTimeout(method.tId);
        method.tId = setTimeout(function(){
            method.call(context);
        },100)
    }

测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数防抖</title>
</head>
<style>
    .mytest{
        width: inherit;
        height: 200px;
        background-color: antiquewhite;
        align-items: center;
        font-size: 50px;
        display: flex;
        justify-content: center;
    }
</style>
<body>
    <div class="mytest" >0</div>
</body>
<script>
    //防抖:
    function debounce(method, context){
        clearTimeout(method.tId);
        method.tId = setTimeout(function(){
            method.call(context);
        },100)
    }
    // 节流 : 防止某些代码没有间断的执行
    function throttle(method, context){
        if(method.isRun){
            return;
        }
        method.isRun = true;
        setTimeout(function(){
            method.call(context);
            method.isRun = false;
        }, 1000)
    }
    var div = document.querySelector('.mytest');
    function foo() {
        div.innerHTML = ++foo.count; 
    }
    foo.count = 0;
    div.onmousemove = function(){throttle(foo)};
</script>
</html>

你可能感兴趣的:(前端)