在 Jquery 中制作可重用函数答案

【问题标题】：Making Reusable Function in Jquery在 Jquery 中制作可重用函数
【发布时间】：2016-06-29 10:49:14
【问题描述】：

我经常使用此代码，它使我的网站加载缓慢。

    $('#start').click(function()  {
        $('html,body').animate({
            scrollTop : $('.scroll').offset().top
        },1500);//end animate
    });//end click

我以前每次都更改#start 和.scroll。有什么建议吗？

【问题讨论】：

"这让我的网站加载缓慢。"是什么让你认为罪魁祸首是这个短代码 sn-p？它绝对不会影响网页加载缓慢。
为什么您需要将这段代码放在多个地方？为什么它会减慢加载时间？

标签： javascript jquery html

【解决方案1】：

将其包装在一个函数中。

function foo(startElem, scrollElem) {
    $(startElem).click(function()  {
        $('html,body').animate({
            scrollTop : $(scrollElem).offset().top
        },1500);//end animate
    });
}

然后在需要时调用它。

foo('#start', '.scroll');

阅读更多here。

【讨论】：

【解决方案2】：

是的，它是传递一些参数

参考这个例子

function scrollCommon(startElem, scrollElem) {
    $(startElem).click(function()  {
        $('html,body').animate({
            scrollTop : $(scrollElem).offset().top
        },1500);//end animate
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <ul>
    <li><a href="#" onClick="scrollCommon($(this), '.one')" data-element="one">One</a></li>
    <li><a href="#" onClick="scrollCommon($(this), '.two')" data-element="one">Two</a></li>
    </ul>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="one">
    <b>One</b><br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
  </div>
  <div class="two">
    <b>Two</b>
    <br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
  </div>
</div>

【讨论】：

【解决方案3】：

除了这是否真的对您的加载时间有影响的问题之外，这里还有另一种设置方法，使用事件委托：

$(document).on('click', '[data-scroll-target]', function(e){
    $('html,body').animate({
        scrollTop: $( this.dataset.scrollTarget ).offset().top
    });
});

#start 现在已经过时了，每个带有data-scroll-target-attribute 的节点都会有这个功能

<div data-scroll-target=".scroll">#start</div>
...
<div class="scroll"> target </div>

https://jsfiddle.net/dsx8o04u/

【讨论】：