自定义jQuery模糊函数在单击事件之前启动

Question

我仍在学习如何编码，所以我完全接受任何建议，如缩进、重构等。

问题是，我在jQuery中创建了一个自定义模糊函数，并创建了重置函数，以便在滚动事件发生后，div中的模糊图像将重置。然而，重置功能似乎立即被调用，这使得除了滚动到一个单独的部分之外，似乎什么都没有发生。

代码：

// This function resets blur:
var reset = function() {
$('#fullscreen-hero').css({
"opacity": "1",
"filter": "none",
"-webkit-filter": "none",
"-moz-filter": "none"
});
};
// this function blurs home_background then scrolls down to 
// expertise section:
var blur = $('#scrollDown').click(function(event){
event.preventDefault();
$('html, body').animate({ scrollTop: $('#me').offset().top }, 880);
$('#fullscreen-hero').css({
"opacity": "0.6",
"filter": "blur(4px)",
"-webkit-filter": "blur(4px)",
"-moz-filter": "blur(4px)"
});
});
// Calling reset function here:
reset();

Answer 1

看起来reset()调用发生在单击事件之外。

它不应该看起来更像：吗

$('#scrollDown').click(function(event){
event.preventDefault();
$('html, body').animate({ scrollTop: $('#me').offset().top }, 880);
$('#fullscreen-hero').css({
"opacity": "0.6",
"filter": "blur(4px)",
"-webkit-filter": "blur(4px)",
"-moz-filter": "blur(4px)"
});
reset();
});

此外，如果重置函数调用得太快，那么你可以尝试使用setTimeout()，它会在5秒后(或者你认为多长时间)调用它：

setTimeout(reset(), 5000);

结果是这样的：

$('#scrollDown').click(function(event){
event.preventDefault();
$('html, body').animate({ scrollTop: $('#me').offset().top }, 880);
$('#fullscreen-hero').css({
"opacity": "0.6",
"filter": "blur(4px)",
"-webkit-filter": "blur(4px)",
"-moz-filter": "blur(4px)"
});
setTimeout(reset(), 5000);
});

Answer 2

这里有一个超时函数的工作示例。

// This function resets blur:
var reset = function() {
$('#fullscreen-hero').css({
"opacity": "1",
"filter": "none",
"-webkit-filter": "none",
"-moz-filter": "none"
});
};
// this function blurs home_background then scrolls down to 
var blur = $('#scrollDown').click(function(event) {
event.preventDefault();
$('#fullscreen-hero').css({
"opacity": "0.6",
"filter": "blur(4px)",
"-webkit-filter": "blur(4px)",
"-moz-filter": "blur(4px)"
});
setTimeout(reset, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="fullscreen-hero" src="http://via.placeholder.com/350x150">
<div id="scrollDown">CLICK</div>