我的腳本需要頁面刷新才能運行

Question

每次我第一次不加載腳本時都加載頁面時，我需要刷新頁面至少3次才能運行。 如何在不刷新頁面的情況下運行腳本？ 該特定腳本在BABEL中。

'use strict';

var deg = 0;
var index = 0;

$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
    return false;
});
$('.navbar').on('mousewheel', function (e) {
    var move = -60;
    var nextIndex = nextIndex = (index + 1) % 6;
    if (e.originalEvent.wheelDelta / 120 <= 0) {
        // wheel up
        move = 60;
        nextIndex = index  -1 < 0 ? 5 : index - 1;
    }
    $('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
    $('#' + index).css('opacity', '0.01');
    $('#' + nextIndex).css('opacity', '1');
    index = nextIndex;
    deg = deg + move;
    event.stopPropagation();
    console.timeEnd('cache');
});

Answer 1

如果將代碼包裝在window.onload函數中怎么辦？

window.onload = function() { 
  // your code
}

僅當html文檔“就緒”且已完全加載時，您的代碼才會運行。

Answer 2

您正在運行依賴於頁面元素的Javascript，並且在元素出現在頁面上之前就執行了javascript；

在document.ready函數中包裝所有代碼

Answer 3

$(document).ready(function () {
var deg = 0;
var index = 0;

$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
    return false;
});
$('.navbar').on('mousewheel', function (e) {
    var move = -60;
    var nextIndex = nextIndex = (index + 1) % 6;
    if (e.originalEvent.wheelDelta / 120 <= 0) {
        // wheel up
        move = 60;
        nextIndex = index - 1 < 0 ? 5 : index - 1;
    }
    $('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
    $('#' + index).css('opacity', '0.01');
    $('#' + nextIndex).css('opacity', '1');
    index = nextIndex;
    deg = deg + move;
    event.stopPropagation();
    console.timeEnd('cache');
});
});

將代碼包裝在ready函數中，以便在加載DOM之后執行JavaScript。