如何通过单击按钮禁用JQuery功能，但默认情况下保持它是打开的?

Question

我正在创建一个视频播放器，当视频结束时重定向到另一个视频页面。

我想添加一个'关闭自动播放按钮'来禁用重定向脚本。

我该怎么做呢?

我代码:

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
</script>

Answer 1

您可以使用unbind()

删除最后触发的侦听器ForjQuery;1.7使用bind ()/unbind ()

$('#turnOfAutoPlay').click(function() {
$('#myVideo').unbind('ended');
})

注意:jQuery 3.0和up.bind()/.unbind()已弃用。使用()/关闭()

function videoEndedHandler () {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
}
$(document).ready(function() {
document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
});
$('#turnOfAutoPlay').on('click', function() {
document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
})

Answer 2

使用全局变量setTimeout功能和点击你的"关闭自动播放按钮";调用clearTimeout

示例代码:

var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}

编辑:给你

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
function myStopFunction() {
clearTimeout(myVar);
}
</script>

Answer 3

我在上面讨论的帮助下修改了我的代码，但我认为它有点笨重😅😅，但它有效…

我代码:

const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');
var myVar;
function videoEndedHandler () {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 10000)
}
//By default autoplay is on.
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
autoplayCheckbox.addEventListener('change', function() {
if (this.checked) {
//if autoplay is on
document.getElementById("demo").innerHTML = "Autoplay: On";
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
} else {
//if autoplay is off
document.getElementById("demo").innerHTML = "Autoplay: Off";
video.removeEventListener('ended', videoEndedHandler);
}
});
function myStopFunction() {
clearTimeout(myVar);
document.getElementById("autoplayCheckbox").checked = false;
document.getElementById("demo").innerHTML = "Autoplay: Off";
}

* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background 0.4s linear;
background-color: #8ecae6;
font-family: 'oswald';
}
.checkbox {
opacity: 0;
position: absolute;
}
.checkbox:checked + .label .ball {
transform: translateX(23px);
}
.label {
background-color: #111;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 50px;
position: relative;
padding: 5px;
height: 26px;
width: 50px;
transform-scale(2.2);
}
.ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
height: 22px;
width: 22px;
transition: transform 0.3s linear;
}

<br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
<div class="ball"></div>
</label>
</div>
<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>

Turn Of Autoplay button仅在10secTimeout功能进行时工作。我添加了那个按钮，因为在主项目中它也可以作为一个按钮来关闭模态看看

我可以缩小它吗??