js事件不同写法的处理方式是什么？

发布于
2023-10-17 河北

学习js事件时，有三种不同的写法，
第一种

<button id="btn" onclick="aa(dianji(),1000)">点击</button>

<script>
 function dianji() {  
        console.log("点击")
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null
        // console.log(timer)
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay)
        }
    }
</script>

第二种

<button id="btn" >点击</button>
<script>
    function dianji() {
        
        console.log("点击")
       
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null
        // console.log(timer)
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay)
        }
    }
    let a = document.getElementById("btn")
    a.onclick = aa(dianji, 1000);
    
    // console.log(timer)
</script>

第三种

 <button id="btn" >点击</button>
<script>
    // 节流
    function aa1(fn,delay){
        let valid = true;
        return function(){
            if(!valid){
                return  false;
            }
            valid = false;
            setTimeout(function(){
                fn();
                valid = true;
            },delay)
        }
    }
    function dianji() {
        
        console.log("点击")
       
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null
        // console.log(timer)
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay)
        }
    }
    let a = document.getElementById("btn")
    // a.onclick = aa(dianji, 1000);
    a.addEventListener("click",aa(dianji,1000))
    
    // console.log(timer)
</script>

我想实现一下点击事件的防抖效果，但是直接在button标签中加点击事件没有效果。
第一个问题：第一种写法哪里有问题？应该怎么改正？
第二个问题：这三种写法是不是在运行的时候有区别？区别是什么？
希望有人解答一下

前端 javascript

阅读 1.3k

AI BotBETA

第一种写法的问题：

在你的第一种写法中，onclick 属性中的函数 aa(dianji(),1000) 执行时，dianji() 函数并没有传入任何参数。而在你的 dianji 函数定义中，你并没有声明接受任何参数，所以当没有传递参数给 dianji 函数时，JavaScript 会抛出一个错误。

要改正这个问题，你可以修改 dianji 函数以接受一个参数，或者在 aa 函数中传递一个参数给 dianji 函数。下面是一个修改的例子：

<button id="btn" onclick="aa(dianji,1000)">点击</button>

<script>
    function dianji(x) {  
        console.log("点击，参数是：" + x);
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null;
        return function (x) {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                fn(x);
            }, delay);
        }
    }
</script>

这三种写法的区别：

这三种写法的主要区别在于何时和如何调用 dianji 函数。

在第一种写法中，dianji 函数在 HTML 元素被加载后立即被调用，然后它的返回值（如果是一个函数）或者 undefined（如果不是一个函数）被传递给 aa 函数。然后，当用户点击按钮时，aa 函数将再次被调用，并传递按钮的点击事件作为参数。
在第二种写法中，dianji 函数在 HTML 元素被加载后立即被调用，并立即绑定到元素的 onclick 事件。当用户点击按钮时，dianji 函数将被调用。这种写法与第一种写法的区别在于，aa 函数在这里被直接绑定到 onclick 事件，而不是在 onclick 事件发生时被调用。
在第三种写法中，dianji 函数在用户点击按钮后被调用。这是通过使用事件监听器实现的，而不是直接在 HTML 元素上设置 onclick 属性。这种写法可以让你有更多的控制权，比如可以添加多个监听器，或者在监听器被触发时执行额外的操作。此外，使用事件监听器通常是更现代和更推荐的 HTML DOM 事件处理方式。