<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < >debounce</ >
    <style>
        #container{
            width:100%;
            height:200px;
            line-height: 200px;
            text-align:center;
            color:#fff;
            background-color:#444;
            font-size:30px; 
        }
    </style>
</head>
<body>
    <div id=\"container\"></div>
    < >
        var count=1;
        var container = document.querySelector(\"#container\");
        container. =debounce(getUserAction,1000);

//最终版本（修复了this指向和event对象）：每次移动鼠标都会触发debounce函数，返回一个匿名函数，由于 没有重载机制，同名函数只会执行最后一个，每个匿名函数执行的第一步都是将timeout清除，进行计时归零处理，只要wait时间没有达到预设值，那么此时setTimeout函数一直存在，也就是说timeout一直存在，直到wait到达设定值后去执行func函数。在timeout存在时移动鼠标那么新函数会进行覆盖，并且会清空原来的计时。
        function debounce(func, wait) {
            var timeout;  //在retur语句前面设置变量用来存储最后的setTimeout
            return function () {
                var arg=arguments;   
                var context=this;  //这里的this指向的container对象,做缓存，供setTimeout函数指向所用。
                clearTimeout(timeout);
                timeout = setTimeout(func.bind(context,arg),wait); //这里用call和apply不行（要用的话使用匿名函数进行包括），应为call和apply改变函数的执行上下文后会立即执行，用bind返回一个绑定函数，等到时间到达后再被调用执行。
                console.log(arguments.callee);
            }
        }

        function getUserAction(e){
            console.log(\"shijian\",e);    //这里的event对象，在没有debounce函数时，直接来自鼠标事件，有debounce函数时，此时参数都在返回的匿名函数里面，setTimeout函数里面的func函数可以通过bind将参数传给他。
            console.log(\"ddd\",this);     //在debounce中调用后，this指向的是window，通过bind处理后，会指向container对象。
            console.log(arguments.callee);
            container.innerHTML=count++;
            console.log(container.innerHTML);
        }
    </ >
</body>
</html>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章