Javascript 为什么下面代码中的油门功能不工作？_Javascript_Html

Javascript 为什么下面代码中的油门功能不工作？

javascript html

Javascript 为什么下面代码中的油门功能不工作？,javascript,html,Javascript,Html,结果是，当页面刚刚加载时，图像没有加载。滚动滚动条时，图像开始显示为lazyload，但油门功能不起作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=

结果是，当页面刚刚加载时，图像没有加载。滚动滚动条时，图像开始显示为lazyload，但油门功能不起作用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        img {
            display: block;
            width: 700px;
            height: 300px;
            margin: 20px auto;
        }


    </style>
</head>

<body>

    <img data-src="./images/1.jpg.png" alt="">
    <img data-src="./images/2.jpg.png" alt="">
    <img data-src="./images/3.jpg.png" alt="">
    <img data-src="./images/4.jpg.png" alt="">
    <img data-src="./images/5.jpg.png" alt="">
    <img data-src="./images/6.jpg.png" alt="">

</body>

<script>
var imgs = document.getElementsByTagName('img');

function lazyLoad(imgs) {
    console.log("oooo");
    var H = document.documentElement.clientHeight; //获取可视区域高度
    var S = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) {
        if (H + S > imgs[i].offsetTop) {
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}

 function throttle(fn, wait) {
    var timeoutID = null;
    return function() {
        if (!timeoutID) {
            clearTimeout(timeoutID);
            timeoutID = setTimeout(function() {
                fn();
                timeoutID = null;
            }, wait);
        }
    }
}


window.addEventListener("scroll", function() {
    throttle(lazyLoad(imgs), 2000)
});


img{
显示：块；
宽度：700px；
高度：300px；
保证金：20px自动；
}
var imgs=document.getElementsByTagName（'img'）；
功能懒散负荷（imgs）{
控制台日志（“oooo”）；
var H=document.documentElement.clientHeight//获取可视区域高度
var S=document.documentElement.scrollTop | | document.body.scrollTop；
对于（变量i=0；iimgs[i]。偏移）{
imgs[i].src=imgs[i].getAttribute（'data-src'）；
}
}
}
节气门功能（fn，等待）{
var timeoutID=null；
返回函数（）{
如果（！timeoutID）{
clearTimeout（timeoutID）；
timeoutID=setTimeout（函数（）{
fn（）；
timeoutID=null；
}，等等）；
}
}
}
addEventListener（“滚动”，函数（）{
节气门（懒散负载（imgs），2000年）
});

结果是，当页面刚刚加载时，图像没有加载。滚动滚动条时，图像开始显示为lazyload，但功能throttle不起作用。

因为throttle是一个返回函数的函数-一个throttled函数。在您的例子中，每当调用事件时，您都会运行throttle，并在其中调用

lazyLoad（img）

，这会立即调用

lazyLoad

，throttle不会做任何事情

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        img {
            display: block;
            width: 700px;
            height: 300px;
            margin: 20px auto;
        }


    </style>
</head>

<body>

    <img data-src="./images/1.jpg.png" alt="">
    <img data-src="./images/2.jpg.png" alt="">
    <img data-src="./images/3.jpg.png" alt="">
    <img data-src="./images/4.jpg.png" alt="">
    <img data-src="./images/5.jpg.png" alt="">
    <img data-src="./images/6.jpg.png" alt="">

</body>

<script>
var imgs = document.getElementsByTagName('img');

function lazyLoad(imgs) {
    console.log("oooo");
    var H = document.documentElement.clientHeight; //获取可视区域高度
    var S = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) {
        if (H + S > imgs[i].offsetTop) {
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}

 function throttle(fn, wait) {
    var timeoutID = null;
    return function() {
        if (!timeoutID) {
            clearTimeout(timeoutID);
            timeoutID = setTimeout(function() {
                fn();
                timeoutID = null;
            }, wait);
        }
    }
}


window.addEventListener("scroll", function() {
    throttle(lazyLoad(imgs), 2000)
});

要修复此问题，应在

lazyLoad

函数本身上运行throttle，并将return函数设置为事件处理程序

var-imgs=document.getElementsByTagName（'img'）；
函数lazyLoad（）{//img是一个全局变量，因此不需要将其作为参数
控制台日志（“oooo”）；
var H=document.documentElement.clientHeight；
var S=document.documentElement.scrollTop | | document.body.scrollTop；
对于（变量i=0；iimgs[i]。偏移）{
imgs[i].src=imgs[i].getAttribute（'data-src'）；
}
}
}
节气门功能（fn，等待）{
var timeoutID=null；
返回函数（）{
如果（！timeoutID）{
clearTimeout（timeoutID）；
timeoutID=setTimeout（函数（）{
fn（）；
timeoutID=null；
}，等等）；
}
}
}
window.addEventListener（“滚动”，节流阀（lazyLoad，2000））；//将限制函数用作事件处理程序

img{
显示：块；
宽度：700px；
高度：300px；
保证金：20px自动；
}

非常感谢您！这是否意味着如果函数充当事件处理程序，它就不能向该函数传递参数？如果是，不传递参数的原因是什么？如果我必须将参数传递给事件处理程序，该怎么办？不客气。不能使用参数调用函数，因为这样它将返回一个结果。要将参数传递给事件处理程序，可以在相同的范围内定义它（定义参数时定义函数），就像在您的案例中一样。另一个选项是使用对象并使用

this

引用参数（需要绑定）。你也可以用咖喱，我再举个例子。非常感谢。你的回答对我很有帮助。我是来自中国的编程新手。我刚学了六个月的前端开发。在大学里，我几乎没学什么计算机科学。到现在为止，在学习了六个多月之后，我仍然觉得很难。我计划在3年内成为一名全堆栈工程师。你能分享一些编码方面的经验吗？例如，您如何学习javascript中的基本概念，如以下概念：函数事件处理程序对象等。我真的很欣赏你的回答。继续学习、练习和玩耍吧。我从stackoverflow中回答问题、大量教程（egghead.io、www.udacity.com/）以及书籍（、Javascript和优秀部分）中学到了很多东西。最近我向新手推荐。祝你好运：）